开发中我们经常遇到，添加些focus，hover事件，样式，但当我们去打开 chrome devtools，浮动上去的时候，然后准备去改变样式的时候，结果由于光标移动了，样式不见了，非常不方便调试，其实 chrome 调试工具给我们提供了很方便的办法


你把 鼠标移动到某个需要调试的 元素上面去，然后，右键 选择force state 选择对应的伪类，就会触发对应元素的 伪类，用来，对应的伪类的样式效果就出来了，然后你就可以去改变样式，而不受光标的影响，调试鼠标悬停在元素上面的样式

同时在 style 面板的右上方会出现一个小提示器，也非常方便

目前支持 active, focus, hover，visited ，focus-within 这个几个伪类

前面几个大家都很熟悉，focus-within 见到用的人不多，focus-within 和 focus 的差别是
focus 是当前元素处于 focus 下的样式。 focus-within 指得是 子元素 处于 focus 下时，该元素的样式，具体可以看 张鑫旭的文章 https://www.zhangxinxu.com/wordpress/2018/01/css-focus-within-pseudo-class-selector/

这个小知识你学会了么，学会了，能大大提高自己平常开发体验

如果你喜欢也可以关注我的 公众号 「chromedev」

chrome devtools tip(1)--调试伪类的更多相关文章

  1. chrome devtools tip(2)--自定义代码片段，构建你的工具箱

    平常开发中,有些代码片段常常用到的,比如,获取 url 参数,rgb转16进制,打印下当前页面的性能数据,给所有的 span 加个样式, 防抖节流,fetch接口,类似 jquery这样的顺手 选择 ...

  2. Chrome DevTools开发者工具调试

    1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...

  3. Chrome DevTools 的 Sources 调试

    在 Chrome 中调试 JS 代码,那你不得不与 Chrome DevTools 的 Sources 面板打交道,所以文章主要通过介绍 Sources 面板上的各部分功能来介绍如何调试网页中的 JS ...

  4. 小tip:CSS计数器+伪类实现数值动态计算与呈现【转】

    [原文]http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/ 一.CSS计数器为 ...

  5. html5 input type="color"边框伪类效果

    html5为input提供了新的类型:color <input type="color" value="#999" id="color" ...

  6. 20个Chrome DevTools调试技巧

    译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging with Chrome DevTools 译者: Fundebug 为了保证可读性,本 ...

  7. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  8. 使用Chrome DevTools直接调试Node.js与JavaScript(并行)

    Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新 ...

  9. Chrome DevTools调试微信X5内核页面

    起因:公司最近在做一个双十一的H5宣传页面,大概需求就是模拟微信视频来电,接通视频后弹出某某明星的视频巴拉巴拉@#%!!!~.看到需求我的第一反应是So easy,正当我码代码码的开心的时候,难题他来 ...

随机推荐

  1. LayUI 上传IE11上传格式错误之后， layer.load(1)的动画一直在，没有关闭（仅限IE11）

    这个问题,测试反馈的时候,有丝丝的不相信,毕竟layui大家都是那么用的,结果后来用最简单的测试,发现确实会出现动画一直在的情况,如下: 上网搜索,也没发现一些有效的信息,最后就是自己读upload. ...

  2. Session和Cookie的用法及区别

    1. Session.Cookie是什么 1.1 概念理解 要了解session和cookie是什么,先要了解以下几个概念. 1.1.1 无状态的HTTP协议 协议:是指计算机通信网络中两台计算机之间 ...

  3. linux iconv 转换文件编码

    查看文件编码file -i filename 递归转换(包括子文件夹)find default -type d -exec mkdir -p utf/{} \;find default -type f ...

  4. Kubernetes学习之应用部署变迁

    从物理单机.虚拟化(容器化)到云原生 历史 云原生 ---初期 总结

  5. KeyValue对RDDs

    创建KeyValue对RDDs 使用函数map,返回keyvalue对 例如,包含数行数据的RDD,那每行的第一个单词作为keys. sparl.txt中的内容如下: hello ! hello wo ...

  6. supervisor 启动ElasticSearch报错问题

    在/etc/elasticsearch/conf.d/新建一个es的配置文件,elasticsearch.conf,这里碰到一个小坑,网上很多文章介绍的是elasticsearch.ini,启动发现找 ...

  7. vscode中如何自动保存

    是的,vscode是个不错的编辑器,它的扩展功能能支持很多的语言,然后在实践过程中,我们发现每写好一次就得手动按CTRL+S,未免有点手酸,这时候我们就可以开启我们的自动保存功能,方式也很简单,在 文 ...

  8. Spring Boot 梳理 - 4个核心

    Spring Boot 魔法的核心:自动配置.起步依赖.命令行界面.Actuator 自动配置: 不用手动配置JdbcTemplate的Bean 不用手动配置DataSource的Bean Sprin ...

  9. ps 将图片四角变成圆角

    1.用PS打开一张图片,用矩形选框工具,选出你要保留的的那一部分,“选择→修改→平滑”.在弹出的选框里添入数值,值越大角就越圆. 2.选择“选择→反选”,再按delete删除就ok了.

  10. node学习笔记(一)本地文件目录查看器

    Node.js 新闻 nw.js 前端开发桌面应用 内容 node.js实战 照例提供百度云链接,本来以为是实战系列的那本,但不是,不过这本也不错 链接:https://pan.baidu.com/s ...