今天,我们来学习CSS中的高级选择器。高级选择器我们介绍三种:后代选择器、交集选择器、并集选择器。
- 后代选择器
后代选择器也叫包含选择器,通过标签之间的嵌套关系、层级关系,限定我们大体范围,在具体范围内查找元素。
.p1 p{ color: red; } .p2 p{ color:blue; }
后代选择器,根据嵌套关系,空格左侧是右侧的祖先元素,空格后面只要是后代关系,不一定是父子关系。
div ol li dt{ color: gold; }
2.交集选择器满足条件1也满足条件2。两种或者以上选择器同时在同一个标签上。写法:选择器之间直接连接,没有任何符号。
p.one{ color:black; }
交集使用的选择器,可以都是类选择器,可以使用标签和类的混写。
以下是交集的连续书写:
p.one.lis{ color:yellow; }
3.并集选择器
有很多元素有相同的样式,可以使用并集选择器将这些标签写在一起,统一设置CSS样式,在选择器中间使用逗号分开。
p.one,p.one.list{ color:black; }
多个选择器选中的元素使用同一个样式。用途:用于清空样式。
div,li,p{ margin: 0; padding: 0; }
好了,自己动手练习一下😄