css 复合选择器

交集选择器

• 作用：选中同时复合多个条件的元素
• 语法：选择器1选择器2选择器3选择器n{}
• 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{
    font-size: 30px;
}

.a.b.c{
    color: blue;
}

并集选择器（选择器分组）

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1,选择器2,选择器3,选择器n{}
• 例子：#b1,.p1,h1,span,div.red{}

div.red{
    font-size: 30px;
}

.a.b.c{
    color: blue;
}

关系选择器

• 父元素：直接包含子元素的元素叫做父元素
• 子元素：直接被父元素包含的元素是子元素
• 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
• 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
• 兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器（Child combinator）

• 作用：选中指定父元素的指定子元素
• 语法：父元素 > 子元素
• 例子：A > B

div.box > p > span{
    color: orange;
}

后代元素选择器（Descendant combinator）

• 作用：选中指定元素内的指定后代元素
• 语法：祖先 后代
• 例子：A B

div span{
    color: skyblue;
}

兄弟元素选择器（Sibling combinator）
作用：选择下一个兄弟
语法：前一个 + 下一个 前一个 + 下一组
例子1：A1 + A2（Adjacent sibling combinator）
例子2： A1 ~ An（General sibling combinator）

p + span{
    color: red;
}

p ~ span{
    color: red;
}