CSS中的嵌套节点[重复]答案

【问题标题】：Nested Node in CSS [duplicate]CSS中的嵌套节点[重复]
【发布时间】：2015-10-02 13:00:57
【问题描述】：

我有类似的东西

<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 之外的所有 div。但是，这不适用于传统的 + 运算符，因为它仅适用于直接相邻的元素。

【问题讨论】：

不，CSS 规则永远不会“上升”。
你必须给你的包装 divs 一个类，然后使用相邻的兄弟选择器。
您正在寻找“表亲”选择器，但遗憾的是它不存在。
你可以将这个嵌套结构包装在它自己的 div 中吗？如果是这样，可以使用 nth-child 选择器实现您想要的。
div + div > .a 可以工作。

标签： css sass

【解决方案1】：

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

【讨论】：

你测试过这个吗？从语法上讲，我猜应该是a:not(:first-of-type)。但无论如何它都不起作用，因为所有 a 标签都是first-of-type，因为first-of-type 指的是父级下的位置。

【解决方案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()

【讨论】：

【解决方案3】：

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>

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

【讨论】：