Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what are the differences between nth-child and nth-of-type in CSS3", so the editor summarizes the following contents, 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 are the differences between nth-child and nth-of-type in CSS3".

The difference between nth-child and nth-of-type in CSS3 is actually very simple: why is nth-of-type called nth-of-type? Because it is distinguished by "type". That is to say: ele:nth-of-type (n) refers to the nth ele element under the parent element, while ele:nth-child (n) refers to the nth element under the parent element and this element is ele, if not, the selection fails.

The text sounds obscure and easy to understand. Here is a small example:

Demo.demo li:nth-child (2) {color: # ff0000;} .demo li:nth-of-type (2) {color: # 00ff00;}

Zero

Onetwo

The results are as follows:

In the above example, .demo li:nth-child (2) selects the one node, while .demo li:nth-of-type (2) selects the two node.

But what if you don't specify tags before nth-child and nth-of-type?

.demo: nth-child (2) {color: # ff0000;} .demo: nth-of-type (2) {color: # 00ff00;}

What is the result of this? take a look at the html structure:

First p

First lisecond li

Second p

Results:

As you can see, the tag type is not specified before them, and the: nth-child (2) selection is still the second element, no matter what tag it is. Instead: nth-type-of (2) selects two elements, the second p tag and the second li tag in the parent .demo, so when no tag type is specified,: nth-type-of (2) selects the second of all type tags.

Now that we have seen the basic use and differences between nth-child and nth-of-type, what is the n in nth-of-type (n) and nth-child (n)?

The n in nth-of-type (n) and nth-child (n) can be numbers, keywords, or formulas. Numbers: that is, the use of the above example, do not repeat. Keywords: Odd, even

Odd and even are keywords that can be used to match child elements where the subscript is odd or even

Note: the subscript of the first child element is 1

Here, we specify two different background colors for odd and even p elements:

P:nth-of-type (odd) {background:#ff0000;} p:nth-of-type (even) {background:#0000ff;}

Formula: or arithmetic expression

Use the formula (an + b). Description: indicates the length of the period, n is the counter (starting at 0) and b is the offset value.

Here, we specify the background color of all p elements whose subscript is a multiple of 3:

P:nth-of-type (3n+0) {background:#ff0000;}

If: nth-of-type (4n+2) is to select all elements where the subscript is a multiple of 4 plus 2

The above is about the content of this article on "what are the differences between nth-child and nth-of-type in CSS3?" 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.