css – So finden Sie ein bestimmtes Klassennamenelement in einer bestimmten Reihenfolge

Question

<p class="item2">
    <p class="tcc">
        <p class="icon">
        </p>
        <p>2017.07.07</p>
    </p>
    <p class="link">
    </p>
    <p class="tcc">
        <p class="icon">
        </p>
        <p>12个月</p>
    </p>
    <p class="link">
    </p>
    <p class="tcc">
        <p class="icon">
        </p>
        <p>2017.07.08</p>
    </p>
</p>

Ich möchte bestehen

item2 .tcc:nth-of-type(2) .icon{}

Warum ist es ungültig, dem zweiten TCC-Klassennamenelement einen Stil hinzuzufügen? Ich habe später darüber nachgedacht: nth-of-typeBenötigt diese Art von Pseudoselektor eine Elementbezeichnung davor? In den Tutorials im Internet scheint es nur darum zu gehen. Kann es sich nicht um einen Klassennamen handeln?

Answer 1

因为 <p class="link"></p> 也是 p 所以 第二个 tcc 其实是 nth-of-type(3)

Answer 2

且不说 nth-of-type 需不需要显式指定标签，:nth-of-type(n) 是指选择父元素中具有指定类型的第 n 个子元素，而你的第二个 .tcc 是 .item2 的第 3 个子元素，而不是第 2 个，或许你应该写成 .item2 .tcc:nth-of-type(3) .icon {}

Answer 3

item2 .tcc:nth-of-type(2) .icon{}

替换为

item2 .tcc:nth-child(3) .icon{}