The difference between Nth-child and Nth-of-type in CSS3

Instance:

First create an HTML structure

class="post">    <p> I am the first paragraph of the article </p>    <p> I am the second paragraph in the article </p></div>

Next use:. Nth-child and Nth-of-type to select and change their text color

. Post>p:nth-child (2) {            color: red;        }

. Post>p:nth-of-type (2) {            color: red;        }

Now add a Heading 1 to the front of the paragraph.

<Divclass= "POST">    <H1>I'm Heading 1.</H1>    <P>I am the first paragraph of the article</P>    <P>I am the second paragraph of the article</P></Div>

Re-use:. Nth-child and Nth-of-type Select and change the text color

. Post>p:nth-child (2) {            color:red;        }

. Post>p:nth-of-type (2) {            color: red;
}

Nth-child contains two meanings, first a paragraph element, the second part of the parent element "DIV" of the paragraph element, and "Nth-of-type" means to select the parent element of paragraph 2

If you add a H2 caption after the "H1" heading, "P:nth-child (2)" will not be able to select any elements at this point because the second element of DIV is not paragraph one "P" so you cannot select any elements. But "P:nth-of-type (2)" still works because the second paragraph "P" in Div is always selected.

Remember that "Nth-child" chooses the child element of the parent element, which does not specify the exact type, while satisfying two conditions: one is a child element, The second is exactly where the child element is located (that is, all child elements are positioned in nth-child parentheses, and the type is nth-child before the element type takes effect, otherwise it does not take effect); "Nth-of-type" selects a child element of a parent element. And this element is the specified type (that is, the child element type is the node of the specified type in parentheses within the specified number)

Really around the mouth, or look at the example of it ....

The difference between Nth-child and Nth-of-type in CSS3