CSS的复合选择器

作者：System 时间：2024年08月11日分类：所有,css 字数：716

这篇文章距离上次修改已过260天，其中的内容可能已经有所变动。

CSS的复合选择器是通过组合不同的基础选择器来创建的，以便更精确地选择目标元素。复合选择器包括：

交集选择器（例如：p.warning 选择所有 class 为 warning 的 <p> 元素）
并集选择器（例如：h1, h2 选择所有 <h1> 和 <h2> 元素）
后代选择器（例如：div a 选择 <div> 元素内的所有 <a> 元素）
子选择器（例如：div > p 选择直接子元素 <p> 的 <div> 元素）
相邻兄弟选择器（例如：h1 + p 选择紧跟在 <h1> 之后的 <p> 元素）
通用兄弟选择器（例如：h1 ~ p 选择 <h1> 之后所有的 <p> 兄弟元素）

实例代码：

/* 交集选择器 */
p.error { color: red; }

/* 并集选择器 */
h1, h2 {
  color: blue;
  margin-bottom: 0;
}

/* 后代选择器 */
div a {
  text-decoration: underline;
}

/* 子选择器 */
div > p {
  font-weight: bold;
}

/* 相邻兄弟选择器 */
h1 + p {
  color: green;
}

/* 通用兄弟选择器 */
h1 ~ p {
  font-size: 80%;
}

这段CSS代码展示了如何使用不同的复合选择器来选择和样式化不同的HTML元素。

CSS的复合选择器

评论已关闭

推荐阅读