最近学习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. ppmoney

    build/config.js 改 8080端口 build/webpack.dev.conf.js 改路径简写 alias:{ 'vux-components':'vux/dist/componen ...

  2. Mac下的类似apt-get的包管理工具Homebrew（笔记）

    对于一个习惯了在 Ubuntu 的终端上通过 apt-get 来安装工具软件的我来说,也希望在Mac上找到类似的工具,能很方便的一条命令就能安装所需的软件,而不用手工的去查找下载编译,或者是折腾安装所 ...

  3. mac中显示隐藏文件

    显示隐藏文件 defaults write com.apple.finder AppleShowAllFiles -bool ture 重新隐藏 defaults write com.apple.fi ...

  4. Ubuntu菜鸟入门（四）—— 搜狗输入法

    一 搜狗输入法安装 1  下载安装包:   http://pinyin.sogou.com/linux/ 2  安装安装包 (1)"GDebi",这是一个用于安装你自己手动下载包的 ...

  5. retrofit2的get和post

    get: 例: @GET("room/question_focus") Call<BaseResponseEntity> followQuestion(@Query(& ...

  6. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  7. php操作mysql

  8. Linux内核补丁批量自动下载工具

    Linux kernel官网cgit工具不支持按变更代码进行补丁搜索,想到个办法就是把补丁都抓下来,这样可以在本地搜索.花了2个小时写了个小工具,话不多说,直接看效果: E:\docs\TOOLS\p ...

  9. [RxJava^Android]项目经验分享 --- 递归实现

    介绍一下业务逻辑:获取接口数据,根据接口内容判断是否需要继续获取数据. 本文使用递归思路,通过RxJava来实现此功能,获取数据的Observable直接用模拟的Observable.just()替代 ...

  10. js知识点

    在变量复制方面,基本类型和引用类型也有所不同,基本类型复制的是值本身,而引用类型复制的是地址. 循环引用 一个很简单的例子:一个DOM对象被一个Javascript对象引用,与此同时又引用同一个或其它 ...