最近学习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的样式的更多相关文章

  1. C语言中的调试小技巧

    C语言中的调试小技巧 经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的 ...

  2. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  3. 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧

    之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...

  4. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  5. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  6. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  7. JavaScript 调试小技巧

    'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...

  8. JavaScript调试小技巧

    1.‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面 ...

  9. 实用的 JavaScript 调试小技巧

    ‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...

随机推荐

  1. 基本术语表【WF】

    术语 定义 activity(活动) Windows Workflow Foundation 中的程序行为单元. 可将单个活动组合在一起,形成更复杂的活动. activity action(活动操作) ...

  2. docker学习

    一.基本概念1.Docker镜像 Docker镜像(Image)就是一个只读的模板. 例如:一个镜像可以包含一个完整的ubuntu操作系统环境,里面仅安装了Apache或用户需要的其它应用程序. 镜像 ...

  3. windows下指定格式文件转移

    #放在目录下执行 1.bat 作用:将该目录下所有mp4格式的文件转移至该目录下的target目录下 须保证target目录不存在@echo off md target\ for /f "d ...

  4. QT操作EXCEL

    介绍一下最基本的QT对EXCEL的读写操作. 声明:转载于:http://blog.csdn.net/czyt1988/article/details/52121360 在使用QT的操作数据库的时候, ...

  5. Daily Scrum Meeting ——SecondDay(Beta)12.10

    一.Daily Scrum Meeting照片 二.Burndown Chart 三.项目进展(check-in) 1. 修复两个Alpha版本所遗留的BUG 2. 着手修改参与者与发布者的侧滑框,改 ...

  6. linux內核輸出soft lockup

    創建的內核線程長期佔用cpu,一直內核認為線程soft lockup,如無法獲取自旋鎖等:因此線程可適度調用schdule(),以進行進程的調度:因為kwatchdog的執行級別低,一直得不到執行 [ ...

  7. python27 ImportError: No module named site

    运行 python27 时发现 提示这个错误 在http://stackoverflow.com/questions/5599872/python-windows-importerror-no-mod ...

  8. java中注解的使用与实例 (二)

    java 注解,从名字上看是注释,解释.但功能却不仅仅是注释那么简单.注解(Annotation) 为我们在代码中添加信息提供了一种形式化的方法,是我们可以在稍后 某个时刻方便地使用这些数据(通过 解 ...

  9. ajax返回json数据，对其中日期的解析

    JS 对其格式化 方法如下 function ChangeDateFormat(d){ //将时间戳转为int类型,构造Date类型 var date = new Date(parseInt(d.ti ...

  10. 从零开始山寨Caffe·陆：IO系统(一)

    你说你学过操作系统这门课?写个无Bug的生产者和消费者模型试试! ——你真的学好了操作系统这门课嘛? 在第壹章,展示过这样图: 其中,左半部分构成了新版Caffe最恼人.最庞大的IO系统. 也是历来最 ...