关于：nth-​​child和：nth-​​of类型选择器

Question

偶然发现了一个我无法解决的问题。 我正在尝试做的一个简单示例：

用红色突出显示.row类中第一个“跨度”的所有出现，但最先出现的除外，应将其突出显示为黄色。

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

可以通过：nth-​​child或：nth-​​of-type选择器完成此操作吗？ 如果没有，该如何不借助内联样式来完成？

这是一个小提琴：

https://jsfiddle.net/z9mho7p5/

提前致谢！

Answer 1

只是简单

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

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

Answer 2

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

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

.row span {
  background: yellow;
} 

的jsfiddle

Answer 3

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

https://jsfiddle.net/z9mho7p5/1/

Answer 4

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

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

https://jsfiddle.net/afelixj/z9mho7p5/2/