Einführung in den Unterschied zwischen :nth-child und :nth-of-type in CSS3-Selektoren

1. :nth-child

1.1 Beschreibung

:nth-child(n) Selektor stimmt mit dem N-ten untergeordneten Element überein, das zu seinem übergeordneten Element gehört von Der Typ des Elements. n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Hinweis: Wenn das N-te Unterelement einen anderen Typ hat als das ausgewählte Element, ist der Stil ungültig!

1.2 Beispiel

<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 Verbesserung

Wenn Sie möchten, dass das zweite 45a2772a6b6107b401db3c9b82c049c2 oben wirksam wird, können Sie die Auswahl des untergeordneten Elements e388a4556c0f65e1904146cc1a846bee entfernen und schreiben Sie ein übergeordnetes Element. Fügen Sie dem Element e388a4556c0f65e1904146cc1a846bee ein Leerzeichen hinzu, um zu verhindern, dass :nth-child nicht wirksam wird.

<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 Beschreibung

:nth-of-type(n) Selector Matching gehört zu Jedes Element des N-ten untergeordneten Elements hat einen bestimmten Typ des übergeordneten Elements. n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

2.2 Beispiel

<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>

Das obige ist der detaillierte Inhalt vonEinführung in den Unterschied zwischen :nth-child und :nth-of-type in CSS3-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!