012_CSS相邻兄弟选择器

最新推荐文章于 2023-06-27 15:36:23 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-06-27 15:36:23 发布

阅读量365

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109063656

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
012_CSS相邻兄弟选择器

1. 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素, 且二者有相同父元素。2. 选择相邻兄弟2.1. 如果需要选择紧接在另一个元素后的元素, 而且二者有相同的父元素, 可以使用相邻兄弟选择器(Adjacent sibling selector)。2.2. 例如, 如果要增加紧接在h1元素后出现的段落的上边距, 可以这样写:h1 + p {margin-top:50px;}3. 语法解释3.1. 相邻兄弟选择器使用了加号(+), 即
复制链接

扫一扫

专栏目录