谷歌浏览器开发者工具系列2:调试元素的状态

介绍

HTML元素本身也包含了一些状态,这些状态下的元素在css中使用伪类(pseudo classes)的形式表示。例如一个文本输入框input,当用户点击的时候就会处于focus状态,从而激活对应伪类状态。或者一个a标签,点击过后会触发visited状态。这些状态都会有默认的样式,当然,很多时候我们也需要给他们指定的样式。那么如何调试这种触发的样式呢?,这时候我们就可以用开发者工具。首先要知道元素的触发状态有以下几种:
1. :active
2. :hover
3. :focus
4. :blur
5. :visited
6. :focus-within
7. :focus-visibel
8. :target

使用指南

  1. 首先打开浏览器打开开发者工具。
  2. 切换到Elements面板之上。
  3. 在Style选项卡中选中对应的状态即可。
  4. 可以看到左侧的Elememnts面板中对应的元素前面有个黄色的点。

pseudo trigger - 谷歌浏览器开发者工具系列2:调试元素的状态

发表回复 0