Question

我有类似

的东西

<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>

有没有办法将相邻的兄弟类型规则应用于类a，因为它们包含在另一个元素中？

例如，我希望能够做到：

a + a { font-size: smaller; }

将规则应用于除第一个div之外的所有规则。但是，这不适用于传统的+运算符，因为它仅适用于直接相邻的元素。

Answer 1

<强> General sibling combinator ~

div ~ div .a{       /* or: div ~ div > .a Or rather div.parent ~ div.parent .a */
  font-size:smaller;
}

<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>

最好使用父类选择器更具体

Answer 2

在纯CSS中执行此操作的唯一方法是为父divs提供一个类：

<div class="wrapper">
  <div class="a">content</div>
</div>
<div class="wrapper">
  <div class="a">content</div>
</div>
<div class="wrapper">
  <div class="a">content</div>
</div>

<强> CSS

.wrapper + .wrapper a {
styles here
}

您还可以使用Javascript / jQuery定位.a divs的父母。您可能需要将jQuery each()和parent()

组合在一起

Answer 3

a:not(:first-of-type){font-size: smaller;}

CSS中的嵌套节点

3 个答案: