1

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

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

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

4 回答 4

2

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

您不能bla单独使用 css 选择器来定位第一个。但是您可以针对除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 选择器规范。

于 2013-06-05T22:30:39.217 回答
1

您可以为此做简单的解决方法，因为您不能使用任何特殊的选择器来做到这一点：

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

我希望这就是你要找的。

于 2013-06-05T22:32:22.927 回答
0

Javascript：

getElementsByClass('bla')[0].style

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

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

h1 + p + p{
 background: red;
}

只是想我会分享。

于 2013-06-05T22:25:15.057 回答
0

根据纯css，不能根据html元素的顺序进行选择。搜索规范（此处：http ://www.w3.org/TR/CSS2/selector.html ）。没有什么是指 html 元素与给定选择器匹配的数量或顺序。

于 2013-06-05T22:27:52.180 回答