举例说明你对相邻兄弟选择器的理解

相邻兄弟选择器(Adjacent sibling combinator),用 + 表示,用于选择紧接在指定元素后的第一个兄弟元素。 它要求两个元素拥有相同的父元素,并且第二个元素必须紧跟在第一个元素之后,中间不能有任何其他元素,即使是空格或换行符也不行。

以下是一些例子:

1. 选中紧跟在 h2 元素后的第一个 p 元素:

<h2>标题</h2>
<p>段落1</p>
<p>段落2</p>
<div>其他内容</div>
<p>段落3</p>

<style>
h2 + p {
  color: red;
}
</style>

在这个例子中,只有“段落1”会变成红色。 “段落2” 和 “段落3” 不会受到影响,因为它们都不是紧跟在 h2 后的第一个兄弟元素。“段落2”虽然是h2的兄弟元素,但它前面有“段落1”隔着。“段落3”前面有div隔着.

2. 列表样式修改:

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<style>
li + li {
  margin-top: 10px; /* 为除了第一个列表项之外的所有列表项添加顶部边距 */
}
</style>

这里,只有“项目2”和“项目3”会有顶部外边距。 “项目1” 不会有,因为它前面没有兄弟元素。 这可以用来实现列表项之间的间距,而不会影响第一个列表项。

3. 表单样式调整:

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username">
  <label for="password">密码:</label>
  <input type="password" id="password">
</form>

<style>
label + input {
  margin-left: 5px; /* 为每个输入框添加左边距,使其与标签稍微分开 */
}
</style>

这个例子中,两个 input 元素都会获得左边距,因为它们都紧跟在一个 label 元素之后。

4. 无效选择器示例:

<div>
  <h2>标题</h2>
  <p>段落1</p>
</div>
<p>段落2</p>

<style>
h2 + p {
  color: red;
}
</style>

这里,只有div内的“段落1”会变成红色。“段落2”不会变红,因为它和h2虽然都是div的兄弟元素,但它们并不在同一个父元素下。h2的父元素是div,而p的父元素是body

总结: 相邻兄弟选择器 + 必须满足两个条件:

  1. 相同的父元素: 两个元素必须是兄弟元素,即拥有相同的父元素。
  2. 紧邻: 第二个元素必须紧跟在第一个元素之后,中间不能有任何其他元素 (包括文本节点, 注释等)。

希望以上例子能够帮助你理解相邻兄弟选择器的用法。

posted @   王铁柱6  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示