Development, we often encounter, add some focus, hover event, the style, but when we went to open chrome devtools, floating up time, then going to change the style of the time, because the result of the cursor, and style disappeared, very inconvenient debugging, in fact, chrome debugging tools provided us with a very convenient way
You move the mouse to a need to debug elements above, then right click to select the corresponding force state pseudo-classes, pseudo-class triggers the corresponding element for the corresponding pseudo-class style effects came out, and then you'll be able to change the style, without cursor effects, commissioning hover above elements in style
At the same time there will be a small reminder of the panel in the top right style, it is also very convenient
Currently supports active, focus, hover, visited, focus-within the several pseudo-classes
In front of a few people are familiar with, focus-within a few people to see, the difference is focus-within and focus is to
focus the elements in the current style in focus. focus-within refers to the child element is in focus, the style of the element, concrete can see Zhangxin Xu articles https://www.zhangxinxu.com/wordpress/2018/01/css-focus-within-pseudo-class- selector /
This little knowledge of what you learned, learned, can greatly increase their usual development experience
If you like you can also concerned about the number of my public "chromedev"
