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

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

..（更多部门，未知数量）
....
一些内容
....

Javascript:

getElementsByClass('bla')[0].style

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

我还找到了一种方法来选择

标记后的第二个

：

h1 + p + p{
 background: red;
}

---

我只是想和大家分享一下。

根据纯css，您不能根据html元素的顺序进行选择。搜索规范（此处：）。没有任何东西是指html元素与给定选择器匹配的数量或顺序。

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

您不能仅使用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”之间的平铺称为通用同级选择器。如果您从未听说过它，请转到。

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

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

---

我希望这就是您想要的。

如果没有进一步的结构要求，这是不可能的。CSS是关于在文档结构中以元素为目标的规则，而对于您所展示的代码，没有唯一的方法来定位它？就像这两个一样，布拉斯是兄弟姐妹吗？或者像您提供的示例中一样，一个在另一个的内部？根据您的示例，包含的div（在“more div's，unknown多少”中引用）是否没有类？或者我们不能假设这一点吗？@JOPLOmacedo:就像示例（嵌套）@n00dle:你不能假设thisHaha实际上是发布的第一个有效解决方案。这是一个蹩脚的解决方案，但这只是因为这是一个蹩脚的问题，而且这是解决当前问题的唯一办法。对一个完美答案的否决票是怎么回事？我没有否决票，但我能理解-提出的是CSS解决方案，而不是JS解决方案。但正如我所说，这是唯一可能的解决办法。这并不是我所希望的，但可能是我在css方面的最佳选择。JOPLOmacedo提供了一个有效的答案

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