了解 CSS 选择器中的 “~” 符号 - CSS

在 CSS 中，“~” 符号表示后续兄弟选择器（General Sibling Selector）。它可以选择与指定元素后面的任何兄弟元素匹配的元素。

语法

element1 ~ element2 {
  /* ... */
}

其中：

• element1：要选中的元素
• ~：后续兄弟选择器
• element2：要匹配的元素

使用示例

选择所有紧跟着指定元素后面的段落元素

p ~ p {
  color: red;
}

在上面的示例中，所有紧跟着段落元素 <p> 后面的段落元素都将被选择，并将其文本颜色设为红色。

选择所有紧挨着指定元素后面的 span 元素，并将其文本颜色设为绿色

div ~ span {
  color: green;
}

在上面的示例中，所有紧挨着 <div> 元素后面的 <span> 元素都将被选择，并将其文本颜色设为绿色。

总结

“~” 符号是 CSS 中非常有用的选择器，它可以选择与指定元素后面的任何兄弟元素匹配的元素。它可以帮助您更细化地控制您的样式表，让您的网页看起来更好看、更专业。