css 兄弟选择器

作者：缺爱╮不缺钙发布日期:2026-07-30 浏览:34

/* 示例代码：使用 CSS 兄弟选择器 */

/* 1. 相邻兄弟选择器（+） */
/* 选择紧接在 h1 元素之后的 p 元素 */
h1 + p {
    color: blue;
}

/* 2. 通用兄弟选择器（~） */
/* 选择所有位于 h1 元素之后的 p 元素 */
h1 ~ p {
    color: red;
}

解释说明：

相邻兄弟选择器（+）：它会选择紧跟在指定元素之后的第一个同级元素。例如，h1 + p 会选择紧接在 h1 元素之后的 p 元素。
通用兄弟选择器（~）：它会选择所有位于指定元素之后的同级元素，而不仅仅是紧接在其后的第一个元素。例如，h1 ~ p 会选择所有位于 h1 元素之后的 p 元素。

这两种选择器都用于选择具有相同父元素的兄弟元素，但它们的作用范围不同。

上一篇：css文字大小

下一篇：css 文字强制换行