CSS - 第 N 个类型和类别

Question

span {
    color: purple;
}
.title {
    color: blue;
}
.title:nth-of-type(2) {
    color: red;
}

<span class="title">Test #1</span>
<span>Some text</span>
<span class="title">Test #2</span>

在上面的简单示例中，为什么文本 Test #2 不是 red 颜色？它是父级的第二个子级，也被声明为 title 类。如果我删除第二行 <span>Some text</span> ，它仍然被选中。

Answer 1

这在 css 中是不可能的。您可以通过其标签设置特定元素的样式(例如 <p> )，但不能通过计算其类来设置指定元素的样式。发生这种情况是因为 CSS 选择了 <p>元素是其父级中段落类型的指定外观，并且在计数时会跳过其他元素。但这是不可能对具有特定类名的元素进行计数的。

如上所述，这在 CSS 中是不可能的。 如果您正在寻找仅 CSS 的答案，并且基于您的标记，您可以执行类似的操作。

示例1

.title ~ .title {
   color: red;
}

示例2

span:nth-of-type(3) {
   color: red;
}

这是一个great article关于这个主题。