开发中我们经常遇到，添加些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. Java NIO之理解I/O模型（二）

    前言 上一篇文章讲解了I/O模型的一些基本概念,包括同步与异步,阻塞与非阻塞,同步IO与异步IO,阻塞IO与非阻塞IO.这次一起来了解一下现有的几种IO模型,以及高效IO的两种设计模式,也都是属于IO ...

  2. pip安装Mysql-python报错EnvironmentError: mysql_config not found

    如下图,安装Mysql-python报错EnvironmentError: mysql_config not found 经过验证,可通过以下方式解决: 从官网下载mysql安装,成功之后输入PATH ...

  3. Spring 梳理-@Controller

    @Controller是一个构造性注解(stereotype),它基于@Component 在自动扫描中,组件扫描器会自动将@Controller申明的类注册为Spring应用上下文的一个bean 可 ...

  4. 制作你的第一个dockerfile文件

    From this lesson you will从这里你将学到1,Make a Dockerfile制作一个Dockerfile2,Build a Docker Image and run构建镜像并 ...

  5. SQL使用UPDATE和SUBSTRING截取字符串方法,从头截取到某个位置，截取中间片段，字符串中间截取到末尾或删除前面的字符串

    //从头截取 update 表名 set 表列名 =SUBSTRING(表列名,1,目标位置数值)  //!计数从1开始,从左往右 where 条件   //条件自己选择,不加where条件会更新所有 ...

  6. Unity进阶技巧 - RectTransform详解

    前言 最近要做UI,有时候需要在代码中调整改变UI控件的属性,比如位置.大小等,然而在NGUI里面,控制UI控件的位置等属性的是RectTransform这个组件,这个组件继承自Transform组件 ...

  7. C++——多文件结构和编译预处理命令

    [toc] 一.多文件结构 1.一个工程可以划分为多个源文件 类声明文件(.h文件) 类实现文件(.cpp文件) 类的使用文件(main函数所在的.cpp文件) 2.利用工程来组合各个文件 //Poi ...

  8. ELK 学习笔记之 elasticsearch Mget操作

    Mget操作: 查询多个文档: curl -XGET 'http://192.168.1.151:9200/_mget' -d '{"docs": [{"_index&q ...

  9. mysql中间件分享（Mysql-prxoy,Atlas,DBProxy,Amoeba,cobar,TDDL）

    hello 各位小伙伴大家好,我是小栈君,这期我们分享关于mysql中间件的研究,也就是数据层的读写分离和负载均衡,希望能够在实际的应用中能够帮助到各位小伙伴. 下期我们将继续分享go语言的系列讲解, ...

  10. idea配置maven以及手动添加webapp目录

    idea配置maven 点击右下角Configure 点击settings 3 . 设置路径 设置自动导包 4 . 点击创建新工程 5 . 选择maven点击下一步 6 . 7 . 8 . 此时,创建 ...