CSS 伪类

时间:2022-07-03 21:17:11

Link

The :link CSS pseudo-class lets you select links inside elements. This will select any link which has not yet been visited, even those already styled using selector with other link-related pseudo-classes like :hover:active or :visited. In order to appropriately style links, you need to put the :link rule before the other ones, as defined by the LVHA-order:link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.

Visited

The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link:hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order:link — :visited — :hover — :active.

Active

:active CSS伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互。通常用于但并不限于 <a> 和 <button> HTML元素。

这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 :link:hover和 :visited。为了正常加上样式,需要把 :active的样式放在所有链接相关的样式后,这种链接伪类先后顺序被称为LVHA顺序:link — :visited — :hover — :active。

Hover:

:hover CSS伪类适用于用户使用指示设备虚指一个元素(没有激活它)的情况。这个样式会被任何与链接相关的伪类重写,像:link:visited, 和 :active等。为了确保生效,:hover规则需要放在:link和:visited规则之后,但是在:active规则之前,按照LVHA的循顺序声明:link-:visited-:hover-:active。

:hover伪类可以任何伪元素上使用。

用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标(鼠标指针)悬停在元素上时提供关联的样式。

Focus

CSS伪类 :focus 在一个元素成为焦点时生效,用户可以通过键盘或鼠标激活焦点(例如:一次表单输入)。

First-Child

CSS伪类:first-child代表了某个元素,这个元素是它父元素的的第一个子元素.

Nth-Child

CSS 伪类 :nth-child(an+b)匹配在文档树中前面有an+b-1个兄弟元素的元素,此时n大于或等于0,并且该元素具有父元素。简而言之,该选择器匹配多个位置满足an+b的子元素。

示例:

  • 1n+0,或n,匹配每一个子元素。
  • 2n+0,或2n,匹配位置为2、4、6、8…的子元素,该表达式与关键字even等价。
  • 2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
  • 3n+4匹配位置为4、7、10、13…的子元素。

ab的值必须为整数,第一个子元素的位置为1,也就是说,该伪类匹配所有位置落在集合{an+b;n=0,1,2,…}中的元素。经常用于表格的隔行匹配。

Nth-Last-Child

伪类:nth-last-child匹配在文档树中后面有an+b-1个兄弟元素的元素,此时n大于或等于0,并且该元素具有父元素。

实际上,该伪类的作用与:nth-child相同,但是其是从后往前选择元素,而不是从前往后。

Nth-Of-Type

:nth-of-type CSS 伪类 匹配一个在文档树中位置为an+b-1 且和伪元素前名字一样 的元素, 此时n大于或等于0,并且该元素具有父元素。参见 :nth-child关于伪元素参数语法详细的说明. 如果你想在不受同胞异类元素和父元素影响保证自己选择相同类型得元素,这个伪元素更加灵活实用.

First-Of-Type

:first-of-type CSS 伪类匹配父元素的所有该子元素类型中第一个出现的元素.

Last-Of-Type

:last-of-type CSS 伪类 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。

Empty

:empty 伪类 代表没有子元素的元素。 这里说的子元素,只计算元素结点及文本(包括空格),注释、运行指令不考虑在内。

Target

伪类选择器 :target 代表一个特殊的元素,若是谈论区别的话,它需要一个id去匹配文档URI的片段标识符.

带有片段标识符的URIs链接到文档中某一个元素 ,被称为是目标元素。例如,这里有一个URI 指向一个叫section2锚点:
http://example.com/folder/document.html#section2
这个锚点可以是任意一个拥有id属性的元素, e.g. <h1 id="section2"> 在我们的例子中,目标元素h1通过伪类选择器:target可以这样被表述:

Checked

:checked CSS 伪类选择器表示任何radio(<input type="radio">), checkbox (<input type="checkbox">) 或option HTML元素("option")) 在一个HTML元素("select") 元素选中或连接一个状态。用户可以改变在该元素上的状态,或选择一个不同的值,在这种情况下:checked伪类不再适应于这个元素,但仍是有关的一个。

Enabled

CSS 伪类 :enabled 表示任何启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入)或获取焦点,则该元素是启用的。元素还有一个禁用的状态(disabled state),在被禁用时,元素不能被激活或获取焦点。

Disabled

:disabled 是 CSS 伪类,表示任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。元素还有一个启用状态(enabled state),在启用状态下,元素可以被激活或获取焦点。