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

Question

偶然发现了一个我无法弄清楚的问题。我尝试做的一个简单例子：

每次出现第一个＆＃39;时都会突出显示RED。在.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; }。

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/