仅跳过顶级 div 的第一个子项 [重复]答案

【问题标题】：Skip first child of top level divs only [duplicate]仅跳过顶级 div 的第一个子项 [重复]
【发布时间】：2018-08-02 04:34:05
【问题描述】：

我想将一种样式应用于除第一个之外的 div 中的所有顶级 div。所有使用not(:first-child) 的尝试都是递归的。怎么办？

<div class='want-to-skip-first-a'>
    <div class='a'>
        <div>1</div>
        <div>2</div>
    </div>
    <div class='a'>
        <div>3</div>
        <div>4</div>
    </div>
    <div class='a'>
        <div>5</div>
        <div>6</div>
    </div>
</div>

.want-to-skip-first-a div:not(:first-child) {
    border-top: solid red 11px;
}

Jfiddle：http://jsfiddle.net/GrAaA/85/

谢谢！

【问题讨论】：

.want-to-skip-first-a > div:not(:first-child) ?我不完全确定你在追求什么。
一个快速的谷歌搜索会在 SO 中给出很多结果

标签： html css

【解决方案1】：

如果您只是尝试将样式应用于除第一个之外已分配“a”类的所有div 标签，那么您只需要对您的 css 稍作修改。

.want-to-skip-first-a .a:not(:first-child) {
  background-color: red;
}

【讨论】：

【解决方案2】：

您可以按照 j08691 的建议进行操作，只需使用直接子选择器 (>)

.want-to-skip-first-a>div:not(:first-child) {
  border-top: solid red 11px;
}

<div class='want-to-skip-first-a'>
  <div class='a'>
    <div>1</div>
    <div>2</div>
  </div>
  <div class='a'>
    <div>3</div>
    <div>4</div>
  </div>
  <div class='a'>
    <div>5</div>
    <div>6</div>
  </div>
</div>

或者您可以使用“兄弟”选择器 (+)

.want-to-skip-first-a .a + .a{
  border-top:11px solid red;
  }

<div class='want-to-skip-first-a'>
    <div class='a'>
        <div>1</div>
        <div>2</div>
    </div>
    <div class='a'>
        <div>3</div>
        <div>4</div>
    </div>
    <div class='a'>
        <div>5</div>
        <div>6</div>
    </div>
</div>

另外，如果你在 div 上指定了类名，我相信你的 CSS 会起作用

.want-to-skip-first-a div.a:not(:first-child) {
  border-top: solid red 11px;
}

<div class='want-to-skip-first-a'>
  <div class='a'>
    <div>1</div>
    <div>2</div>
  </div>
  <div class='a'>
    <div>3</div>
    <div>4</div>
  </div>
  <div class='a'>
    <div>5</div>
    <div>6</div>
  </div>
</div>

其中任何一个都应该满足您的需要。

【讨论】：

【解决方案3】：

这很容易，但你却很复杂。您只需要在 div 中提供您想要的 css 属性的类。在这种情况下，您有 6 个元素，您将 class 元素赋予所有元素，少于第一个

<div>
   <div >1</div>
   <div class='want-to-skip-first-a'>2</div>
   <div class='want-to-skip-first-a'>3</div>
   <div class='want-to-skip-first-a'>4</div>
   <div class='want-to-skip-first-a'>5</div>
   <div class='want-to-skip-first-a'>6</div>
</div>

Your Solution Is Here

【讨论】：