css - 仅设置具有类名的第一个相邻 div 的 css 样式

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。因此，一种可能性是只在所有 blas 的第一个 bla 上设置您想要的样式。然后通过定位除第一个以外的所有 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 .