Introduction to the difference between :nth-child and :nth-of-type in CSS3 selectors

1. :nth-child

1.1 Description

<p>:nth-child(n) selector matches the Nth child element belonging to its parent element, regardless of The type of element. n can be a number, keyword, or formula.

<p>Note: If the Nth sub-element is different from the selected element type, the style will be invalid!

1.2 Example

<style>
p>p:nth-child(2){
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件：1、是<p>元素，2、父元素<p>的第二个元素。这里被选择，会变成红色。-->
    <p>我是第3个段落</p>
</p>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--不符合条件：不是<p>元素，没有被选择-->
    <p>我是第2个段落</p>
</p>

1.3 Improvement

<p>If you want the second <span> to take effect, you can remove the child elements&lt ;p>'s selection, write a parent element <p> and add a space to prevent :nth-child from not taking effect.

<style>
p :nth-child(2){ //p+空格，只根据父元素选择
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--符合条件-->
    <p>我是第2个段落</p>
</p>

2.:nth-of-type

2.1 Description

<p>:nth-of-type(n) selector matching belongs to the parent element Each element of the Nth sub-element of a specific type. n can be a number, keyword, or formula.

2.2 Example

<style>
p>p:nth-of-type(2){
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件：1、是特定元素类型<p>，2、是父元素<p>的第二个<p>元素。这里被选择，会变成红色-->
    <p>我是第3个段落</p>
</p>
<p>
    <p>我是第1个段落</p>
    <blockquote>第1个引用</blockquote>
    <p>我是第2个段落</p><!--符合条件：1、是特定元素类型<p>，2、是父元素<p>的第二个<p>元素。这里被选择，会变成红色-->
    <p>我是第3个段落</p>
</p>

The above is the detailed content of Introduction to the difference between :nth-child and :nth-of-type in CSS3 selectors. For more information, please follow other related articles on the PHP Chinese website!