通用兄弟选择器

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 5 课，共 43 课。

通用兄弟选择器（~）会选中指定元素的所有后续兄弟元素。

例如：

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

使用以下 CSS：

h2 ~ p {
  color: blue;
}

应用此 CSS 后，结果将是：

段落 1 保持不变（它不是 h2 后面的同级元素）

第 2 段变成蓝色（它是 h2 后面的同级元素）
第 3 段变成蓝色（它是 h2 后面的同级元素）

挑战

简单

使用通用兄弟选择器创建一条 CSS 规则，让所有位于之后的 <p> 元素亮起亮粉色（#ff69b4）。

亲手试试

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</p>
</body>
</html>