相邻兄弟选择器

Coddy CSS 选择器课程的第 9 课，共 15 课。

让我们来了解相邻兄弟选择器。这类选择器用于选择与指定元素有相同父元素，且紧跟在该元素后面的元素。相邻兄弟选择器是一种 CSS 选择器，它会选中与指定元素互为兄弟元素且紧邻该元素的所有元素。相邻兄弟选择器用两个选择器之间的加号（+）表示。

语法

former_element + target_element {
  /* 样式属性 */
}

假设我们有以下 HTML 结构：

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

要设置紧跟在段落后面的 <span> 的样式，可以使用相邻兄弟选择器：

p + span {
   font-weight: bold;
}

在这个例子中，“Adjacent span”会显示为粗体。

挑战

简单

创建一个包含 p 元素和 span 元素的网页。
使用相邻兄弟选择器，为紧邻 p 元素的 span 元素设置红色边框。

亲手试试

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

CSS 选择器中的所有课

1CSS 选择器简介

CSS 选择器的作用为什么它们很重要？

4属性选择器

属性选择器简介存在性和值完全匹配属性值选择器属性值选择器 II 属性值选择器 III

2简单选择器

类型选择器类选择器 ID 选择器通用选择器

3组合选择器

子选择器后代选择器相邻兄弟选择器通用兄弟选择器

自己练习： Web 在线编辑器