Question

我想将样式应用于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/

谢谢！

Answer 1

如果您只是尝试将样式应用于除第一个标记之外的所有已分配了“ a”类的div标记，则只需对CSS进行较小的修改即可。

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

Answer 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>

其中任何一个都可以满足您的需求。

Answer 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

仅跳过顶级div的第一个孩子

3 个答案: