关于 :nth-child 和 :nth-of-type 选择器

Question

偶然发现一个我想不通的问题。我正在尝试做的一个简单示例：

在 class .row 下的第一个 'span' 每次出现时都用红色突出显示，除了第一个出现的地方，它应该用黄色突出显示。

.row span:nth-of-type(1) {
background: red;
}

这可以通过 :nth-child 或 :nth-of-type 选择器来完成吗？如果没有，如何做到这一点而不诉诸内联样式?

这是一个fiddle：

提前致谢！

Answer 1

此解决方案取决于您在 JSfiddle 中的代码，使用 :not（否定）排除第一段。

.row:not(:first-child) span:nth-of-type(1) {
  background: red;
}

.row span {
  background: yellow;
}

Answer 2

您可以添加 .row:nth-of-type(1) span { background-color: yellow; }.

Answer 3

在第二条规则中，也添加 .row:first-child span

.row:first-child span, .row span {
  background: yellow;
}

Answer 4

只是简单

 .row span:first-child
 {
     background-color:red;
 }

 .row:first-child  span:first-child 
 {
      background-color:yellow ! important;
 }

Regarding the :nth-child and :nth-of-type selectors