在css中兄弟选择器+与~如何使用-css教程-PHP中文网

在css中兄弟选择器+与~如何使用

P粉602998670

发布： 2025-10-26 21:42:01

原创

643人浏览过

相邻兄弟选择器（+）仅选中紧接在指定元素后的第一个兄弟元素，如h2 + p{color:red;}；通用兄弟选择器（~）则选中该元素之后所有同级兄弟元素，如h2 ~ p{color:blue;}。

在css中兄弟选择器+与~如何使用

在CSS中，兄弟选择器用于选择位于同一父元素下的某些相邻或后续的兄弟元素。主要有两种：相邻兄弟选择器（+）和通用兄弟选择器（~）。它们用法相似但作用范围不同。

使用+符号，它选择紧接在指定元素后的第一个兄弟元素，且两者必须有相同的父元素。

例如：

你想选中紧跟在h2后面的p元素：

h2 + p {
  color: red;
}

登录后复制

只有当p元素直接跟在h2后面时才生效。如果中间插入了其他元素，则不匹配。

HTML结构示例：

<h2>标题</h2>
<p>这个段落会被选中</p>
<p>这个不会被+选中</p>

登录后复制

使用~符号，它选择在指定元素之后的所有同级兄弟元素，不要求紧邻。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

例如：

你想选中所有在h2之后的p元素：

h2 ~ p {
  color: blue;
}

登录后复制

只要p元素出现在h2，无论中间有没有别的元素，都会被选中。

HTML示例：

<h2>标题</h2>
<span>一些内容</span>
<p>这个也会被~选中</p>
<div>其他元素</div>
<p>这个也会被选中</p>

登录后复制

这两种选择器常用于结构化布局或样式控制，比如文章排版、表单样式等。

注意点：

基本上就这些。掌握+和~能让你更灵活地根据元素位置写样式，减少不必要的类名。

以上就是在css中兄弟选择器+与~如何使用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：