Question

在this JSFiddle中，除了第一个孙子外，我如何设置所有<a>元素的样式？（abc）有一个选择器吗？我想不惜一切代价避免使用两条规则。

＆＃13;

#outer a:not(:first-child){
  color: red;
}

＆＃13;

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

＆＃13;

Answer 1

你可以这样做（不确定你是否可以避免超过1个选择器）

#outer >div:first-child a:not(:first-child),
#outer >div:not(:first-child) a{
  color: red;
  border:1px solid;
}

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

Answer 2

一条规则 2个选择器：

a ~ a 一般同级组合涵盖了另一个<a>之后的<a>。这基本上选择除了兄弟<a>的第一个<a>之外的所有内容。

div:nth-of-type(n+2) a 这会定位第二个div 中的所有<a>以及将来的所有兄弟div < SUP> 。

演示

＆＃13;

a~a,
div:nth-of-type(n+2) a {
  color: red
}

＆＃13;

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

＆＃13;

向Temani Afif道具建议(n+2)。

Answer 3

这有效，不完全确定原因！

#outer :not(:first-child) {
  color: red;
}

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

除了第一个外，是否有所有孙子的CSS选择器？

3 个答案:

演示