通用兄弟选择器 | CSS-Tricks

CSS 年鉴 → 选择器 → G → 通用兄弟选择器

Sara Cope 于 2020年5月14日

CSS 中的通用兄弟选择器 (~) 在使用时看起来像这样

.featured-image ~ p {
  font-size: 90%;
}

在这个示例中，您将选择文章中所有在特色图片（带有“featured-image”类名的元素）之后出现的段落，并使其font-size稍微小一些。

这将选择相同层级上的元素。在这个示例中，.featured-image 和 p 元素处于相同层级。如果选择器继续到 p 之后或 .featured-image 之前，则正常规则适用。所以 .featured-image ~ p span 仍然会选择 .featured-image ~ p 匹配的任何元素的后代。

选择器级别 4 的规范称之为 “后继兄弟选择器”。

演示

这是一个突出显示所有在 img 之后的 p 元素的另一个示例

img ~ p {
  background-color: #FEF0B6;
  padding: 5px;
}

结果如下

特殊情况

WebKit 过去有一个特殊情况，您无法将它们与伪选择器一起使用。比如

input:checked ~ div {
   /* Wouldn't work */
}

我不知道此问题在哪个版本的浏览器中修复，但现在已修复。

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	3+	1+	9+	7+	任何	任何

selvy

# 2012 年 11 月 18 日

这个技巧有点难以理解。

JoeShmoe

# 2013 年 3 月 11 日

“仍然会选择作为任何元素的后代的 span”

Rohit

# 2013 年 6 月 27 日

请举个例子，让我理解这个技巧。

blackhat

# 2015 年 4 月 23 日

对于那些不理解这个选择器的人，请尝试以下示例
http://codepen.io/anon/pen/jPOxOa

John Smith

评论永久链接# 2015 年 11 月 10 日

你说的太对了。简洁明了。10/10
金星。拍拍你的背。

Matthew Lymer

# 2015 年 10 月 14 日

如果人们仍然不理解，“兄弟”元素 (b) 是另一个元素 (a) 的兄弟元素，意味着它 (b) 出现在 (a) 之后，并且与 (a) 拥有相同的直接父元素，例如：

<div>
    <span class="a"></span>
    <span class="b"></span>
    <span class="a"></span>
    <span class="a"></span>
</div>

在上述示例中，选择器 .b ~ .a 选择所有 .a，其中 .a 出现在 .b 之后，并且与 .a 共享相同的直接父元素 - 因此在本示例中，只有最后两个 .a 元素会被选中。

Mihaly

# 2015 年 11 月 19 日

只是一点说明。
iOS9 中的 Chrome 中出现了 WebKit 问题，你无法将通用兄弟组合器与伪选择器一起使用。希望他们能尽快修复。

Ralph

评论永久链接# 2015 年 12 月 25 日

我发现 iOS 上的 Chrome 在很多方面都表现得很奇怪。iOS 上的 Chrome 与 Android 上的 Chrome 相比，在很多方面都存在很大差异。

John

# 2016 年 1 月 26 日

同意。我也遇到过同样的问题。你知道这个问题什么时候可以修复吗？

演示

特殊情况

更多信息

浏览器支持

评论

发表评论 取消回复

发表评论取消回复