CSS的复合选择器
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元素。
评论已关闭