Something about CSS-structure pseudo-class selector
Some new selectors added by CSS3, some new methods are added when selecting elements for CSS. Structure pseudo-classes are mainly used to select elements from the structure of the html dom. All types are listed in the form of tables, and their functions are described first with an overall image, then, let's look at the specific use of it one by one.
| Structured pseudo-category |
E: root |
Match the root element of the document. In HTML (an application under standard General Markup Language), the root element is always HTML |
| Structured pseudo-category |
E: nth-child (n) |
Matches the nth child element E in the parent Element |
| Structured pseudo-category |
E: nth-last-child (n) |
Matches the nth child element E in the parent Element |
| Structured pseudo-category |
E: nth-of-type (n) |
Matches the nth sibling Element E of the same type |
| Structured pseudo-category |
E: nth-last-of-type (n) |
Matches the nth sibling Element E in the same type |
| Structured pseudo-category |
E: last-child |
Match the last Eelement in the parent Element |
| Structured pseudo-category |
E: first-of-type |
Matches the first Eelement In the sibling Element |
| Structured pseudo-category |
E: only-child |
Matches E that belongs to the unique child element of the parent element. |
| Structured pseudo-category |
E: only-of-type |
Matching E that belongs to the unique sibling element of the same type |
| Structured pseudo-category |
E: empty |
Matching Element E without any child elements (including text nodes) |
I. E: root, matching the root element of the document
II. E: nth-child (n), matching the nth child element E of the parent Element
Nth-child selects the child element of the parent element, which must meet two conditions: ① There is no definite type specified, as long as it is a child element; ② the element must be at the position of n. You only need to check whether the nth child under the parent element is E. If yes, it will match; otherwise, it will not match.
Here is an example:
<Div id = "example"> <div id = "example">
<H1> title <P> here is the first paragraph </p>
<P> here is the second paragraph </p>
# Example p: nth-child (2 ){
Font-style: bold;
Color: red;
}
# Example p: nth-of-type (2 ){
Font-style: bold;
Color: green;
}
Effects of the above Code:
P: nth-child (2): select the second P-type child node of the parent element, p: nth-of-type (2 ): select the second P type for all child nodes of the parent element.
It is helpful to understand the structure pseudo classes after understanding E: nth-child (n). Other types are based on this special situation.
In addition, a special usage of the structure pseudo class is to select the location of the specified element. Nth-child (n), nth-last-child (n), nth-of-type (n), nth-last-of-type (n) N in the selector. This parameter can be an integer (1, 2, 3, 4), key (odd, even ), it can also be a formula (2n + 1,-n + 5 ). however, the starting value of parameter n is always 1 rather than 0.
1. The parameter can be a value;
2. parameter n is the expression [n * length]: when a single length is an integer of 1, all elements in the entire series will be selected until the element cannot be selected. Example: ": nth-child (2n )"
When n = 0, 2*0 = 0. No element is selected;
When n = 1, 2*1 = 2. The 2nd elements in the series are selected;
3. The parameter n is the expression "n + length", for example, ": nth-child (n + 3 )"
When n = 0, 0 + 3 = 3, 3rd elements are selected;
When n = 1, 1 + 3 = 4, 4th elements are selected;
4. The parameter n is the expression [-n + length], for example, ": nth-child (-n + 3 )"
When n = 0,-0 + 3 = 3, 3rd elements are selected;
When n = 1,-1 + 3 = 2, 2nd elements are selected;
When it is a negative number, no element is selected.
5. If the expression n is [2 * n + 1] or [2 * n-1], the effect is the same as that of odd, the same [2n] and even have the same effect.
Here, we have a special usage: matching from the opposite direction of the parent element: last-child,: nth-last-child,: nth-last-of-type (n ),: last-of-type, which are matched from the last of the parent element.
