开发中我们经常遇到，添加些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. 上传本地Jar包到阿里云的云效私有仓库

    一.前言 前2天玩了一下上传本地jar到maven中央仓库,随后我们老大又给我说了一个叫云效的私有仓库也可以玩,小编试了一下,果然很舒服,配置很简单,效率很高,几分钟就能搞定,只需要自己有个阿里云的账 ...

  2. DefaultSerializer requires a Serializable payload but received an object of type [model.Admin]

    一.问题描述:   在用redis做二级缓存时,出现如下异常   DefaultSerializer requires a Serializable payload but received an o ...

  3. 【面试必备】小伙伴栽在了JVM的内存分配策略。。。

    周末有小伙伴留言说上周面试时被问到内存分配策略的问题,但回答的不够理想,小伙伴说之前公号里看过这一块的文章的,当时看时很清楚,也知道各个策略是干嘛的,但面试时脑子里清楚,心里很明白,但嘴里就是说不清楚 ...

  4. Python学习-while循环&逻辑运算符

    一.while循环,continue.break语句在while循环中的使用 1.while循环语句: while 条件:     代码块 执行过程:判断条件是否为真,如果为真,执行代码块,继续下次循 ...

  5. What skills you need to become a full stack java developer?

    For a full stack Java developer you should start with learning backend and front-end technologies Fr ...

  6. Android Studio [WebView]

    WebViewActivity.java package com.xdw.a122; import android.graphics.Bitmap; import android.support.v7 ...

  7. 从 Int 到 Integer 对象，细细品来还是有不少东西

    int 是 Java 八大原始类型之一,是 Java 语言中为数不多不是对象的东西,Integer 是 int 的包装类,里面使用了一个 int 类型的变量来存储数据,提供了一些整数之间的常用操作,常 ...

  8. 环境搭建-ELK单节点环境搭建(02)

    写在前面 常说:"工欲善其事必先利其器",这话想想也是一点毛病也没有,在开始学习任何技术之前,我们总得有一个实际可供操作的实验环境.有人说,"看十遍不如用一遍" ...

  9. Entity Framework Core生成的存储过程在MySQL中需要进行处理及PMC中的常用命令

    在使用Entity Framework Core生成MySQL数据库脚本,对于生成的存储过程,在执行的过程中出现错误,需要在存储过程前面添加 delimiter // 附:可以使用Visual Stu ...

  10. Spring MVC-从零开始-@RequestMapping结合@RequestParam （从HTTP键值对中取值，作用于函数参数）

    1.@RequestParam 注解使用的时候可以有一个值,也可以没有值:如果请求参数和处理方法参数的名称一样的话,@RequestParam 注解的 value 这个参数就可省掉了:@Request ...