如何找到指定顺序的某类名元素

Question

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

我想通过

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

给第二个tcc类名的元素添加样式，为啥会无效的。我后来想了一下，nth-of-type这类伪类选择器前都是要元素标签的吗？网上的教程好像都是，不能是类名吗？

Answer 1

因为 <div class="link"></div> 也是 div 所以 第二个 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{}

Answer 4

item2 .tcc:nth-of-type(2)这个选择器的意思其实是元素要同时满足item2 .tcc并且item2 :nth-of-type(2)(item2的第二个子元素)，满足第一条的是第1,3,5个div，满足第二条的是第2,4个div，所以同时满足这两个条件的元素不存在，该样式不会被应用。