CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
最近学习html5和一些UI框架，接触css比较多，就来跟大家分享一下css中的一些调试技巧。之前做页面，css都是自己写的，所以要改哪里可以很快的找到，现在使用了UI框架，里面的样式是不可能读完的，所以就要通过调试来找到要修改的地方。
在调试CSS的时候，我们一般使用Chrome、Firefox、IE等浏览器自带的工具，快捷键都为F12.但是，我们要调试如hover的样式时，鼠标放上去才会显示，鼠标一走就看不到了，没办法看清楚css样式，还有就是浏览器自带的一些hover、foucs、active样式，怎么也找不到。今天我们就来看看，怎么调试他们吧！
首先，我们来写一个简单的页面，只有两个按钮，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Hover</title>
</head>
<body>
<style type="text/css">
div { margin:100px; }
button {background: #FEFEFE; width: 80px; height:30px; border: 1px #ccc solid; cursor:pointer;}
button:hover {background: #DEDEDE; cursor: pointer; }
button:active { border:#0FF 1px solid; background: #FEFEFE;}
button:focus { border:#0FF 1px solid; background: #FEFEFE;}
</style>
<div>
<button id="btnOk">OK</button>
<button>Cancel</button>
</div>
</body>
</html>
首先来说一下我最喜欢的chrome：
然后是Firefox，如图：
最后是IE：
都比较简单，不过这都只是针对css的，对于用javascript动态加上去的css是无法调试的。
CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式的更多相关文章
- C语言中的调试小技巧
C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的 ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧
之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- 第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- JavaScript 调试小技巧
'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...
- JavaScript调试小技巧
1.‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面 ...
- 实用的 JavaScript 调试小技巧
‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...
随机推荐
- 网站跨站点脚本，Sql注入等攻击的处理
从360安全论坛里找到的一段代码,经过整理封装,直接在站点Global.asax文件或写一个HttpModule来拦截恶意请求即可: http://bbs.webscan.360.cn/forum.p ...
- 组合模式/composite模式/对象结构型模式
组合模式/composite模式/对象结构型 意图 将对象组合成树形结构以表示"整体--部分"的层次结构.Composite使得用户对单个对象和组合对象的使用具有一致性. 动机 C ...
- php.exe php-cgi.exe php-win.exe的区别
php.exe(linux下是php/bin/php)是提供来在命令行(命令行解释器)执行PHP文件的工具,比如你在有文件abc.php,那么你可以在CMD命令提示符下执行命令php.exe abc. ...
- MIT 6.828 JOS学习笔记15. Lab 2.1
Lab 2: Memory Management lab2中多出来的几个文件: inc/memlayout.h kern/pmap.c kern/pmap.h kern/kclock.h kern/k ...
- left join 多个表关联时，将表值置换
/****** Script for SelectTopNRows command from SSMS ******/ SELECT B.[GOODSID] ,A.INDUSTRY_CNAME ,C. ...
- Solr4.10.3安装配置
系统环境 window版本为:windows 8.1 64位 软件环境 JDK版本:1.7 solr版本:4.10.3 tomcat版本:tomcat 7 安装过程 步骤一:将下载好的solr-4.1 ...
- Linux学习笔记（16）-多线程
什么是多线程?或者说,什么是线程? 按照书本上的描述,所谓线程,便是包含在进程内部的顺序执行流,是进程中实际运作的单位,也是操作系统能够进行调度的最小单位. 一个进程中可以并发多条线程,每条线程并行执 ...
- 光标失去焦点事件 onblur
onblur="judgeLandCode()" function judgeLandCode(){ $.ajax({ type:'post', dataType:'json', ...
- import sun.net.www.MimeTable报错
我原以为是要导什么jar包,仔细一看是 Access restriction: The type * is not accessible due to restriction on required ...
- update maven之后jre被改成1.5的问题
在 pom.xml 中添加如下代码: <build> <plugins> <plugin> <groupId>org.apache.maven.plug ...