012_CSS相邻兄弟选择器

最新推荐文章于 2025-09-11 00:23:54 发布

原创最新推荐文章于 2025-09-11 00:23:54 发布 · 472 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了CSS相邻兄弟选择器（Adjacent Sibling Selector）的概念、语法、使用示例，以及如何通过它修改HTML元素间的样式。通过实例演示，理解其在布局和样式控制中的作用，如设置h1后段落的间距。

1. 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素, 且二者有相同父元素。

2. 选择相邻兄弟

2.1. 如果需要选择紧接在另一个元素后的元素, 而且二者有相同的父元素, 可以使用相邻兄弟选择器(Adjacent sibling selector)。

2.2. 例如, 如果要增加紧接在h1元素后出现的段落的上边距, 可以这样写:

h1 + p {
    margin-top: 50px;
}

3. 语法解释

3.1. 相邻兄弟选择器使用了加号(+), 即相邻兄弟结合符(Adjacent sibling combinator)。

3.2. h1 + p这个选择器读作: "选择紧接在h1元素后出现的段落, h1和p元素拥有共同的父元素"。

3.3. 请记住, 用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:

li + li {
    font-weight: bold;
}

请看下面这个文档树片段:

<div>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ol>
</div>

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

3.4. 例子

3.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS相邻兄弟选择器</title>
		<meta charset="utf-8" />

		<style type="text/css">
			li + li {
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<ul>
		    <li>List item 1</li>
		    <li>List item 2</li>
		    <li>List item 3</li>
	    </ul>
		<ol>
		    <li>List item 1</li>
		    <li>List item 2</li>
		    <li>List item 3</li>
		</ol>
	</body>
</html>

3.4.2. 效果图