CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
2015-04-01 17:34
816 查看
最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧。之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的,所以就要通过调试来找到要修改的地方。
在调试CSS的时候,我们一般使用Chrome、Firefox、IE等浏览器自带的工具,快捷键都为F12.但是,我们要调试如hover的样式时,鼠标放上去才会显示,鼠标一走就看不到了,没办法看清楚css样式,还有就是浏览器自带的一些hover、foucs、active样式,怎么也找不到。今天我们就来看看,怎么调试他们吧!
首先,我们来写一个简单的页面,只有两个按钮,代码如下:
首先来说一下我最喜欢的chrome:
然后是Firefox,如图:
最后是IE:
都比较简单,不过这都只是针对css的,对于用javascript动态加上去的css是无法调试的。
在调试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是无法调试的。
相关文章推荐
- 调试DOM元素hover,focus,actived的样式--谷歌浏览器调试器
- CSS技巧-根据兄弟元素的数量来设置样式
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- css 伪元素 :hover :active :before :after :visited :link :focus ...
- css之hover改变子元素和其他元素样式
- css hover对其包含的子元素进行样式设置示例
- CSS实现某元素hover时 所有兄弟节点样式改变
- CSS中hover改变子元素和其它元素样式
- google chrome 调试技巧:监控 DOM 元素被修改
- css hover对其包含的元素进行样式设置
- IE6共存、调试(查看Dom元素,修改元素样式)之我见 + IE6下Firebug Lite的使用
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- css:hover状态改变另一个元素样式的使用
- css利用id和class来控制元素样式技巧总结
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
- css上传文件样式元素样式美化
- CSS:伪类link,hover,active,visited,focus的区别
- jQuery .css color 重写 :hover样式没了
- js随笔,css和js禁止网页选择文本,table的class样式使得td的class样式失效,jquery获得元素坐标
- QTP11使用DOM XPath以及CSS识别元素对象