最近学习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. css雪碧图生成工具4.2更新

    v4.0更新连接:http://www.cnblogs.com/wang4517/p/4493917.html v4.1更新连接:http://www.cnblogs.com/wang4517/p/4 ...

  2. nodejs持续学习--必须关注4网站

    1.官网:https://nodejs.org/en/ 2.模块社区:www.npmjs.com(FQ) 3.github.com 4.全球技术问题讨论社区 http://stackoverflow. ...

  3. allow zero datetime=true导致datetime转换失败：MySql.Data.Types.MySqlDateTime”的对象无法转换为类型“System.Nullable`1[System.DateTime]

    allow zero datetime=true导致datetime转换失败:MySql.Data.Types.MySqlDateTime”的对象无法转换为类型“System.Nullable`1[S ...

  4. Programming Language A 学习笔记（二）

    1. 语法糖--元组的"名称引用"与"位置引用": (e1,...,en) <=> {1=e1,...,n=en} 类型:t1 * - * tn & ...

  5. [转] nodemon 基本配置与使用

    在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...

  6. ng-repeat循环出来的部分调用同一个函数并且实现每个模块之间不能相互干扰

    使用场景:用ng-repeat几个部分,每个部分调用同一个函数,但是每个模块之间的功能不能相互干扰 问题:在用repeat实现.content块repeat的时候打算这样做:新建一个空的数组(nmbe ...

  7. ARP报文发送的可视化实现

    一.安装VS2013,下载wpdpack,为VS2010配置WinpCap环境: ⑴首先在View中选择Property Manager,然后展开工程,再展开Debug|Win32 ,接着右击 Mir ...

  8. Win 通过修改注册表把CapsLock映射为Rshift

    成品: REGEDIT4     [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout] "Scancod ...

  9. WPF-开机自启

    #region 开机自启 /// <summary> /// 开机自启创建 /// </summary> /// <param name="exeName&qu ...

  10. Windows安装mysql-5.7.17-winx64.zip方式

    1.去官网上下载.zip格式的文件. 2.解压到一个文件夹,这里我用D:\MySql表示 3.在D:\MySql\mysql-5.7.17-winx64下新建my.ini配置文件 黄色背景色的地方需要 ...