Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the pseudo-class selectors commonly used in css", which are easy to understand and well-organized, hoping to help you solve your doubts? let me lead you to study and learn about "what pseudo-class selectors are commonly used in css".

Pseudo-class selector is one of the important contents in CSS stylesheets. So in this article, the editor of w3cschool will introduce what pseudo-classes are and what pseudo-class selectors are commonly used.

What is a pseudo class?

The CSS pseudo-class is used to add some special effects of selectors.

Because the change in state is non-static, when an element reaches a particular state, it may get the style of a pseudo-class; when the state changes, it loses that style. As you can see, its function is similar to that of class, but it is based on an abstraction outside of the document, so it is called a pseudo-class.

What are the commonly used pseudo-class selectors? Dynamic pseudo-class selector

: link . Element is defined with a hyperlink but has not been accessed

: visited . Element is defined with a hyperlink and has been accessed

: active . The element is activated

: hover . Mouse hover

: focus . Element to get focus

In the CSS definition, a:hover must be placed after a:link and a:visited; a:active must be placed after a:hover. Therefore, the order of the four pseudo-class selectors for the a tag is: a:link, a:active visible, observed, and so on. The property must be set strictly according to this rule, otherwise it will have no effect.

UI element state pseudo-class selector

: checked . Selected check button or radio button form element

: enabled . All enabled form elements

: disabled . All disabled form elements

The UI element state pseudo-class selector mainly operates on Form form elements. The most common ways to use it, such as setting "type=" text, have enable and disabled states, enable is writable and disabled is not available.

Structural pseudo-class selector

: fisrt-child . The first child of the parent element

: last-child . The element of the last child of the parent element

: root . The root element of the document in which the element is located. In a HTML document, the root element is always html, so the selector matches the html type selector with the same content

Nth-child (n). The nth child element of the parent element. Where n can be an integer (1), a keyword (even,odd), or a formula (2n+1), and the starting value of n is 1, not 0.

: nth-last-child (n): the penultimate child element of the parent element. This selector is calculated in the opposite order from the: nth-child (n) selector, but it is used in the same way, where: nth-last-child (1) always matches the last element, which is equivalent to last-child.

Nth-of-type (n). The nth element with the specified type in the parent element

Nth-last-of-type (n). The penultimate element with the specified type in the parent element

: first-of-type . The first element with the specified type in the parent element, which is equivalent to nth-of-type (1)

: last-of-tye . The last element with the specified type in the parent element, which is equivalent to: nth-last-of-type (1)

: only-child . The parent element contains only one child element, and the child element matches the element

: only-of-type . The selection parent element contains only one child element of the same type, and the child element matches the selection element

: empty . Select an element that has no child elements, and the element does not contain any text nodes

The advantage of using a structural pseudo-class selector is that you can dynamically select elements based on where they are in the document, reducing the dependence of HTML documents on id or classes, and helping to keep your code clean and tidy.

It is also important to note that in the structure pseudo-class selector, the sequence number of the child element starts at 1.

Negative pseudo-class selector

E:not (F). Select all E elements except element F

These are all the contents of the article "what are the pseudo-class selectors commonly used in css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.