English Original: 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 were not released, and all of the browser support mentioned in the article did not include these three versions of the browser. In IE8 and Fir
: Nth-of-type ()
: Nth-of-type () pseudo-Class and nth-child () pseudo-class look for the same method, except that he matches an element of the specified type in the rule. The following rules will match each P element that belongs to the third child element in the parent element (P of the 3rd child element may be many in one, except that 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 if you have pointed to the third P element. At first you might think this is the same as using the Nth-child effect, but Nth-child (3) calculates all the child elements, so the result may be different, unless all of the sibling elements of P are also p elements.
: Nth-of-type pseudo-class currently does not have browser support.
: Nth-last-of-type pseudo-Class
: The element that the Nth-last-of-type pseudo-class points to has several elements of the same type behind it. And: Like the Nth-last-child pseudo-class, it is the return number from the last child element. The following rules will be matched to the second-to-last sibling element P (Note: sibling, same-level node):
P:nth-last-of-type (2) {background: #ff0;}
: Nth-last-of-type () does not currently have browser support.
: Last-child pseudo-Class
: The last pseudo-class points to the final child element in the parent element. It has the same effect as: Nth-last-child (1). The following rule matches all p that belong to the last child element in the parent element:
p:last-child {background: #ff0;}
: The Last-childe pseudo-class can be used in Mozilla-based browsers. Opera does not support: Last-childe pseudo-class, there is a bug in Safri (the above rule will match all p elements). It's amazing. It can be used normally in OmniWeb (Beta version 5.1.1), although this browser is based on safari. This may be due to the latest version of Apple WebKit, because the WebKit used by OmniWeb is usually slightly lower than the safari version.
: First-of-type pseudo-Class
: The First-of-type pseudo-class points to the first element in the same type element. It is the same as: Nth-of-type (1).
P:first-of-type {background: #ff0;}
: First-of-type pseudo-class currently does not have browser support.
: Last-of-type pseudo-Class
: The Last-of-type pseudo-class points to the last element in the same type element. It is the same as Nth-last-of-type (1).
P:last-of-type {background: #ff0;}
: Last-of-type pseudo-class currently does not have browser support.
:
only-child pseudo-Class
: The Only-childe pseudo-class points to elements that have no other child elements in the parent element. It is the same as: First-child:last-child or: Nth-child (1): Nth-last-child (1) is the same (the latter is not professional and concise).
p:only-child {backgound: #ff0;}
: The Only-childe pseudo-class can now be used in Mozilla-based browsers. In Safari it seems to be interpreted as: First-child (the above rules will be matched to all the first child elements in the document P).
: Only-of-type pseudo-Class
: The Only-of-type pseudo-class points to child elements that are no longer of the same type as the parent element. This is the same as: First-of-type:last-of-type or: Nth-of-type (1): Nth-last-of-type (1) is the same (the latter is not professional enough).
P:only-of-type {background: #ff0;}
: Only-of-type pseudo-class currently does not have browser support.
"Recommended"
1. CSS3 Free Video Tutorial
2. Integration of 20 CSS/CSS3 Common Properties
3. h5 and CSS3 to make input boxes with hint text
4. Share some of the most recent CSS3 properties that are commonly used
5. Use CSS to make chat box small sharp corner, bubble effect
