chrome devtools tip(1)--调试伪类

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

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

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

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

前面几个你们都很熟悉，focus-within 见到用的人很少，focus-within 和 focus 的差异是 focus 是当前元素处于 focus 下的样式。 focus-within 指得是 子元素 处于 focus 下时，该元素的样式，具体能够看 张鑫旭的文章 www.zhangxinxu.com/wordpress/2…

这个小知识你学会了么，学会了，能大大提升本身日常开发体验

若是你喜欢也能够关注个人 公众号 「chromedev」