Question

如何设置只有第一个具有“bla”类的div的样式？（不是第二个）。

<div class="outer">
  <div>
    ....(more div's, unknown how many)
      <div class="bla">
        ....
        <div class="bla">some content</div>
      </div>

    ....
  </div>
</div>

Answer 1

我假设这个答案是相邻的元素，你的意思是兄弟元素。如果您指的是父子元素，那么请使用N1xx1的答案。话虽如此......

您无法仅使用css选择器定位第一个bla。但你可以定位所有blas，但第一个。因此，一种可能性是仅在所有bla的第一个blas上设置您想要的样式。然后通过定位所有blas但第一个来覆盖这些样式。像这样：

.bla {
   ...styles for the first bla..
}

.bla ~ .bla {
   ...override styles set on first bla that you dont want on the others
}

两个“.bla”之间的波浪号称为通用兄弟选择器。如果您从未听说过，请转到css selectors spec。

Answer 2

您可以为此执行简单的解决方法，因为您无法使用任何特殊选择器执行此操作：

.bla {
    /* style here, example: */
    background-color: #f00;
}
.bla .bla {
    /* negate the style, example: */
    background-color: transparent;
}

我希望这就是你要找的东西。

Answer 3

使用Javascript：

getElementsByClass('bla')[0].style

编辑：JOPLOmacedo提供了一个仅CSS（更好）的答案

我还找到了一种方法来选择<p>标记后的第二个<h1>：

h1 + p + p{
 background: red;
}

想到我会分享它。

Answer 4

根据纯css，你不能根据html元素的顺序选择。搜索规范（此处：http://www.w3.org/TR/CSS2/selector.html）。没有任何内容可以指html元素与给定选择器匹配的次数或顺序。

仅使用类名设置第一个相邻div的css样式

4 个答案: