开发中我们经常遇到，添加些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. [MySQL] 02- Optimisation solutions

    前言 一.资源 MySQL 对于千万级的大表要怎么优化? - MySQL - 知乎[方法论] MySQL大表优化方案[一些优化的细节操作] MySQL大表优化方案[一些优化的细节操作] 分布式数据库下 ...

  2. 《深度解析Tomcat》 第一章 一个简单的Web服务器

    本章介绍Java Web服务器是如何运行的.从中可以知道Tomcat是如何工作的. 基于Java的Web服务器会使用java.net.Socket类和java.net.ServerSocket类这两个 ...

  3. 编程范式 --- 函数式编程（Funtional Programming，简称FP）

    函数式编程(Funtional Programming,简称FP)是一种编程范式,也就是如何编写程序的方法论 主要思想:把计算过程尽量分解成一系列可复用函数的调用 主要特征:函数是"第一等公 ...

  4. Redis-->windows上的安装教程

    Windows下安装Redis服务 说明:本文拷贝自http://www.cnblogs.com/jaign/articles/7920588.html Redis是有名的NoSql数据库,一般Lin ...

  5. python简单爬虫（爬取pornhub特定关键词的items图片集）

    请提前搭好梯子,如果没有梯子的话直接403. 1.所用到的包 requests: 和服务器建立连接,请求和接收数据(当然也可以用其他的包,socket之类的,不过requests是最简单好用的) Be ...

  6. Linux上编译安装PHP

    这篇文章主要介绍了关于Linux上编译安装PHP,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 之前在服务器上编译安装了PHP运行环境,但是安装完过了一段时间就差不多忘记了,只是零零星 ...

  7. python语言程序设计基础（嵩天）第四章课后习题部分答案

    p121: *题4.1:猜数字游戏.在程序中预设一个0~9之间的整数,让用户通过键盘输入所猜的数,如果大于预设的数,显示“遗憾,太大了!”:小于预设的数,显示“遗憾,太小了!”,如此循环,直至猜中该数 ...

  8. goLang 纳秒转 毫秒 转 英文时间格式

    package main import ( "fmt" "time" ) func main(){ fmt.Println(time.Now().Unix()) ...

  9. 从零开始入门 K8s | 可观测性：监控与日志

    作者 | 莫源  阿里巴巴技术专家 一.背景 监控和日志是大型分布式系统的重要基础设施,监控可以帮助开发者查看系统的运行状态,而日志可以协助问题的排查和诊断. 在 Kubernetes 中,监控和日志 ...

  10. uniapp 用户拒绝授权再次调起授权-语音识别、微信地址、附近地址

    小程序重构,采用 uniapp 框架.记录一下踩过的坑.关于用户拒绝再次调起授权,及如何识别语音识别.微信地址.附近地址的处理. 语音识别 组件 语音识别,小程序只有录音功能,若要识别录音文件,常规做 ...