Detailed explanation of examples of selectors in CSS3

English original text: www.456bereastreet.com/archive/200601/css_3_selectors_explained/ Chinese translation: www.dudo.org/article.asp?id=197 Note: This article was written in January 2006, when IE7, IE8 and Firefox3 had not yet been released. All the browser support mentioned in the article did not include these three versions of browsers. Use in IE8 and Fir
:nth-of-type()
:nth-of-type() pseudo-class and nth-child() pseudo-class The method is very similar, except that it matches elements of the type specified in the rule. The following rule will match every p element that belongs to the third child element of the parent element (there may be many p elements belonging to the third child element in one, but they are located under different parent elements, dudo note):
p:nth-of-type(3) { background:#ff0; }
This method is useful when you want to determine whether the third p element has been pointed to. At first you may think that this has the same effect as using nth-child, but nth-child(3) will count all child elements, so the result may be different, unless all sibling elements of p are also p element.
:nth-of-type pseudo-class is currently not supported by browsers.
:nth-last-of-type pseudo-class
: The element pointed to by the nth-last-of-type pseudo-class has several elements of the same type after it. Like the :nth-last-child pseudo-class, it counts backwards from the last child element. The following rules will match the penultimate sibling element p (note: it is a sibling and node of the same level):
p:nth-last-of-type(2) { background:#ff0 ; }
:nth-last-of-type() is currently not supported by browsers.
:last-child pseudo-class
:last pseudo-class points to the last child element in the parent element. It has the same effect as :nth-last-child(1). The following rule matches all p that is the last child element in the parent element:
p:last-child { background:#ff0; }
:last-child The pseudo-class can be used in Mozilla-based used in the browser. Opera does not support the :last-childe pseudo-class, and there is a bug in Safri (the above rule will match all p elements). Surprisingly it works fine in OmniWeb (beta version 5.1.1), even though this browser is based on Safari. This may be due to the return of the latest version of Apple's WebKit, as OmniWeb typically uses a slightly lower version of WebKit than Safari.
:first-of-type pseudo-class
:first-of-type pseudo-class points to the first element among elements of the same type. It is the same as :nth-of-type(1).
p:first-of-type { background:#ff0; }
: The first-of-type pseudo-class is currently not supported by browsers.
:last-of-type pseudo-class
:last-of-type pseudo-class points to the last element among elements of the same type. It is the same as nth-last-of-type(1).
p:last-of-type { background:#ff0; }
:last-of-type pseudo-class is currently not supported by browsers.
:only-child pseudo-class
:The only-childe pseudo-class points to elements that do not have any other child elements in their parent elements. It is the same as :first-child:last-child or :nth-child(1):nth-last-child(1) (the latter is not professional and concise enough).
p:only-child { backgound:#ff0; }
:only-childe pseudo-class is currently available in Mozilla-based browsers. In Safari it seems to be interpreted as: first-child (the above rule will be matched to all first child elements p in the document).
:only-of-type pseudo-class
:only-of-type pseudo-class points to those parent elements that no longer have child elements of the same type. This is the same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1) (the latter is not professional enough).
p:only-of-type { background:#ff0; }
:only-of-type pseudo-class is currently not supported by browsers.

【Related recommendations】

1. CSS3 free video tutorial

2. Integrate 20 common CSS/CSS3 properties

3. h5 and css3 to create an input box with prompt text

4. Share several commonly used latest css3 attributes

5. Use CSS to create small sharp corners and bubble effects of the chat box

The above is the detailed content of Detailed explanation of examples of selectors in CSS3. For more information, please follow other related articles on the PHP Chinese website!