In CSS3, there are two new selectors that can choose the corresponding sub -element under the parent element. One is:nth-childanother is:nth-of-type. But what is the difference between them?
In fact, the difference is very simple::nth-of-typeWhy is it called:nth-of-type? Because it is “type“to distinguish. That is:eLE: nth-of-type (n) refers
and ELE: NTH-Child (N) refers to the n n element under the parent element and this element is ELE. If not, choose a failure.
Text sounds more obscure and easy to understand. Here is an example of attached: here:
<style>
.demo li:nth-child(2) {
color: red;
}
.demo li:nth-of-type(2) {
color: blue;
}
</style>
<body>
<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>
The result is as follows:
The above example, .Demo Li: NTH-Child (2) Choose<li>one</li>nodes, and .demo li: nth-of-type (2) chose to choose<li>two</li>node.
.Demo li: nth-child (2) Selection process analysis:
: nth-child (2)Select numbersPreferred, it found the father class first.demo, and then look for the second child element of the parent class.demo,First determine whether this sub -element is li, if it is selected, the non -choice fails.
.demo li: NTH-OF-TYPE (2) Selection process analysis:
: NTH-OF-TYPE (2)Selection typePreferred, it found the father class first.demo, then from.demoSelectionlielementNo. 2
But if the label is not specified before NTH-Child and NTH-OF-Type?
<style>
.demo :nth-child(2) {
color: #ff0000;
}
.demo :nth-of-type(2) {
color: #00ff00;
}
</style>
<body>
<ul class="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>
</body>
As far as it can be seen, they do not specify the type of label before they,：nth-child(2)Selected stillSecond element, no matter what it is label. and: NTH-Type-OF (2) Select two elements, the second P label and the second li tag in the parent -level.Demo, which can be seen,When the label type is not specified,: NTH-Type-OF (2) Select the second type of all types of tags.
We have learned about the basic use and differences between NTH-Child and NTH-OF-TYPE, so further NTH-OF-Type (n) and nth-child (n)
What isnWhat is it?
NTH-OF-TYPE (n) and nth-child (n) N can be
numbers, keywords or formulas.
number: That is, the use of the above example will not be repeated.
Keywords：Odd 、even
ODD and EVEN can be used to match the bidding,#or#
The keywords of the sub -element of
Note: The first sub -bidding of the first child element is 1
Here, we specify two different background colors for strange numbers and even P elements:
<style>
<style>
// ODD Strange Number
P: NTH-OF-TYPE (ODD) {
background: red;
}
// Even even
P: NTH-OF-TYPE (EVEN) {
background: blue;
}
</style>
<body>
<div>
<ul class="demo">
<p>first p</p>
<p>second p</p>
<p>first p</p>
<p>second p</p>
<p>first p</p>
<p>second p</p>
<p>first p</p>
<p>second p</p>
</ul>
</div>
</body>
</style>
Formula: or an arithmetic expression
Use formula (an + b). Description: The length of the cycle, n is a counter (starting from 0), b is the offset value. Here, we specify the background color of all P elements of 3 multiple of the bidding:
<style>
p:nth-of-type(3n+0) {
background: #ff0000;
}
</style>
If: NTH-OF-TYPE (4N+2) is to select all elements of the bid with 4 plus 2