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

Most people do not understand the knowledge points of this article, "what is the syntax for the use of CSS structure pseudo-class selector?", so the editor summarizes the following content, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the syntax for the use of CSS structure pseudo-class selector".

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

E:last-child is the element E of the last child of the parent element. Equivalent to E:nth-last-child (1)

E:root selects the root element of the document that matches element E. In a HTML document, the root element is always html, so the selector matches the html type selector with the same content

E F:nth-child (n) selects the nth child element F of the parent element E. 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.

E F:nth-last-child (n) selects the nth penultimate child element F of the parent element E. This selector and E:nth-child (n) selector are calculated in the opposite order, but they are all used in the same way, where nth-last-child (1) always matches the last element, which is the same as last-child

E:nth-of-type (n) selects the nth E element of the specified type within the parent element

E:nth-last-of-type (n) selects the nth penultimate E element with the specified type in the parent element

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

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

E:only-child selects that the parent element contains only one child element, and the child element matches the E element

E:only-of-type selects that the parent element contains only one child element of the same type, which matches the E element

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

Note:

(1), "ul > li:nth-child (3)" does not necessarily express the third child element li in the ul element of the selection list. The proposition is meaningful only if there is no other element before the third li element in the list ul, otherwise it will not change the style of the third li element in the list.

(2),: the parameter in nth-child (n) can only be n and cannot be replaced by other letters.

(3),: nth-child (odd) selects odd terms, while using: nth-last-child (odd) selects even terms

The above is about the content of this article on "what is the syntax for the use of pseudo-class selectors in CSS structure". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.