css伪类选择器_伪类选择器

css伪类选择器

Pseudo-class selectors affect elements in certain states: for example, a:hover controls the appearance of links during a momentary touch on a mobile device, or on mouse hover. In contrast, pseudo-element selectors control the appearance of portions of an element’s content, such as the first line or letter of a paragraph.

伪类选择器会影响某些状态下的元素：例如， a:hover控制在移动设备或鼠标悬停的短暂触摸期间链接的外观。 相反， 伪元素选择器控制元素内容各部分的外观，例如段落的第一行或字母。

The table below covers all the current pseudo-class selectors in CSS, with links to appropriate articles on the selectors:

下表涵盖了CSS中所有当前的伪类选择器，并提供了有关选择器上相应文章的链接：

CSS Pseudo-class selectors

Pseudo-class selector	Purpose
:link	Controls the appearance of an unvisited link. Strongly associated with the a tag, to the point at which the a selector used by itself before a style declaration accomplishes the same thing.
:visited	Controls the appearance of visited links. Quite a few restrictions on styles in terms of what can be applied, due to security risks.
:hover	Controls the appearance of an element while it is being hovered over with a mouse or other pointing device. While it is heavily associated with the a tag, CSS does not explicitly specify this association. In modern browsers, :hover can be applied to any arbitrary element, such as img:hover.
:active	The appearance of content while the user is clicking on it, i.e. between the mouse button being held down and it being released. Rarely used, since the effect is usually transient.
:first-child	Selects the first child element of a markup sequence. For example, ul li:first-child would specify that the style declaration applies to the first li element in any unordered list.
:last-child	Selects the last child element in a sequence.
:nth-child(n)	Selects children in an element sequence, in iterations of (n), where n is the word odd, even, a number, or a mathematical expression.
:nth-of-type(n)	Selects the nth appearance of a particular element.
:focus	Selects links that have been reached via keyboard navigation and form elements that are selected, such as text inputs and textareas.
:only-child	Selects an element if it is the only child of a parent.
:first-of-type	Selects the first appearance of an element
:last-of-type	Selects the last appearance of an element.
:only-of-type	Selects an element if it is the only child of a particular type inside its parent.
:nth-last-child(n)	Counts backwards from the end of a set of child elements.
:nth-last-of-type(n)	Counts backwards from the end of a set of child elements to include a certain sequence of tags.
:not(S)	Matches elements that are not (S).
:valid	The state of a form element that is considered valid to a defined pattern of characters or numbers.
:invalid	The state of a form element with content that is considered invalid.
:checked	Selects form elements that are checked, such as radio buttons and checkboxes.

CSS伪类选择器

伪类选择器	目的
:link	控制未访问链接的外观。 与a标签紧密相关，以至于样式声明之前由其自身使用a选择器完成相同的操作。
:visited	控制访问链接的外观。 由于存在安全风险，因此在样式方面有很多限制。
:hover	在用鼠标或其他定点设备悬停元素时控制元素的外观。 尽管它与a标签紧密相关，但CSS并未明确指定此关联。 在现代浏览器中， :hover可以应用于任何任意元素，例如img:hover 。
:active	内容在用户单击时的外观，即在按住鼠标按钮和释放按钮之间。 很少使用，因为效果通常是短暂的。
:first-child	选择标记序列的第一个子元素。 例如， ul li:first-child将指定样式声明适用于任何无序列表中的第一个li元素。
:last-child	选择序列中的最后一个子元素。
:nth-child(n)	在(n)迭代中选择元素序列中的子代 ，其中n是单词odd ， even ，数字或数学表达式。
:nth-of-type(n)	选择特定元素的第n个外观。
:focus	选择通过键盘导航已到达的链接以及所选的表单元素，例如文本输入和文本区域。
:only-child	选择一个元素(如果它是父元素的唯一子元素)。
:first-of-type	选择元素的首次出现
:last-of-type	选择元素的最后一个外观。
:only-of-type	如果元素是其父元素内特定类型的唯一子元素，则选择该元素。
:nth-last-child(n)	从一组子元素的末尾往前计算。
:nth-last-of-type(n)	从一组子元素的末尾向后计数，包括标签一定的顺序。
:not(S)	匹配不是 ( S )的元素。
:valid	被认为对定义的字符或数字模式有效的表单元素的状态。
:invalid	内容被视为无效的表单元素的状态。
:checked	选择选中的表单元素，例如单选按钮和复选框 。

Note that pseudo-selectors can be strung together: a:visited:hover, for example.

请注意，伪选择器可以串在一起：例如， a:visited:hover 。

翻译自: https://thenewcode.com/47/Pseudo-class-selectors

css伪类选择器