css - 如何找到指定順序的某一類名元素

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>

我想透過

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

為第二個tcc類別名稱的元素加入樣式，為啥會無效的。後來想了一下，nth-of-type這類偽類選擇器前都是要元素標籤的嗎？網路上的教學好像都是，不能是類別名稱嗎？

Answer 1

因為

也是 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{}