What is a pseudo-class selector in css? A brief introduction to pseudo-class selectors

This chapter will tell you what is a pseudo-class selector in CSS? A brief introduction to pseudo-class selectors. Let everyone understand the role of pseudo-class selectors in css, what are the classifications of css pseudo-class selectors, and other knowledge. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. (Related recommendations: "CSS Tutorial")

##1. Introduction to pseudo-class selectors

Pseudo-class selector (referred to as: pseudo-class) is defined by a colon, which defines the state of the element, such as click pressed, click completed, etc. The style can be modified for the state of the element through pseudo-classes.

The function of the pseudo-class is similar to the element style in the general DOM, but unlike the element style in the general DOM, it does not change any DOM content. It just inserts some modified elements, which are visible to the user but not to the DOM. The effect of a pseudo class can be achieved by adding an actual class.

What is a pseudo-class?

It means that the css built-in class css itself gives it some features and functions, that is, you don’t need class=... or id=... You can use it directly. Of course, you can also change some of its attributes, such as: a:link{color:#FF0000;}

2. Pseudo-class selector The classification of

Pseudo-class selectors can be mainly divided into: dynamic pseudo-class selectors, UI element state pseudo-class selectors, structural pseudo-class selectors, and negative pseudo-class selectors.

The selector syntax of these categories is introduced in detail below:

1. Dynamic pseudo-class selector syntax

• E: link (link pseudo-class selector): Selects the matching E element, and the matching element is defined as a hyperlink and has not been visited. Commonly used on link description points

• E:visited (link pseudo-class selector): Selects the matching E element, and the matching element is defined with a hyperlink and has been visited. Commonly used on link drawing points

• E:active (user behavior selector): Select the matching E element, and the matching element is activated. Commonly used on link strokes and buttons

• E:hover (user behavior selector): Select the matching E element, and the user's mouse stays on the element E. IE6 and below browsers only support a:hover

• E:focus (user behavior selector): Select the matching E element, and the matching element gets focus

Dynamic pseudo-class selector can be used in the application of hyperlink a tag:

a tag has 4 pseudo-classes (corresponding to four states), as follows:

• :link "Link": Before the hyperlink was clicked

• :visited "Visited": After the link was visited

• :hover "Hover": When the mouse is placed on the label

• :active "Activate": When the mouse clicks on the label but does not let go.

Code example: There is a certain order for these four pseudo-class selectors of the

/*让超链接点击之前是红色*/
a:link {color: red;}

/*让超链接点击之后是橙色*/
a:visited {color: orange;}

/*鼠标悬停，放到标签上的时候是绿色*/
a:hover {color: green;}

/*鼠标点击链接，但是不松手的时候*/
a:active {color: black;}

a tag. The order between each style is very particular. Once it appears, Arrangement errors are likely to cause overwriting, causing one of the styles to be unable to be displayed. So how do these four pseudo-class selectors of the a tag need to be sorted before they can be used?

In the CSS definition, a:hover must be placed after a:link and a:visited to be effective, and a:active must be placed after a:hover to be effective.

So, the order of the four pseudo-class selectors of the a tag is: a:link, a:visited, a:hover, a:active

2.UI elements Status pseudo-class selector

• E:checked (selected status pseudo-class selector): Matches the selected check button or radio button form element

• E:enabled (enabled status pseudo-class selector): matches all enabled form elements

• E:disabled (unavailable status pseudo-class selector): matches All disabled form elements

The UI element status pseudo-class selector is mainly used to operate on the Form element in HTML. The most common example is that our "type="text" has enable and There are two states of disabled, the former is writable and the latter is unavailable; in addition, "type="radio" and "type="checkbox"" have two states: "checked" and "unchecked". Let's look at two examples. For example, if you want to distinguish the "disabled" text box from other text boxes, you can use it like this:

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

Note: IE6-8 does not support ":checked", ":enabled", ":disabled" are the three selectors.

3. Structural pseudo-class selector

• E: fisrt-child: The element E that is the first child element of the parent element. Equivalent to E:nth-child(1)

• E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

• E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同

• E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.

• E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同

• E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素

• E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素

• E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同

• E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同

• E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素

• E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素

• E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

结构伪类选择器很容易遭到误解，需要特别强调。如：

p:first-child;

它表示的是：选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

注意：

结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

4.否定伪类选择器

E:not(F)：匹配所有除元素F外的E元素

例：对form中所有input加边框，但又不想submit也起变化，就可以这样写：

input:not([type="submit"]) {border: 1px solid red;}

The above is the detailed content of What is a pseudo-class selector in css? A brief introduction to pseudo-class selectors. For more information, please follow other related articles on the PHP Chinese website!