今天我们一起来探讨关于css选择器的内容
1.标签选择器:
语法:标签名{}
作用:选中对应标签包裹的内容
注意:常用的标签就那么多,如果用标签选择器,很可能会选中其他不需要设置样式的内容
2.id选择器
作用:选中对应id属性值的内容
语法:#id属性值{}
注意:
id属性值:不能以数字开头,最好不要是汉字
id属性值不能复用
3.class选择器
作用:跟id选择器很像,选中对应class属性值的内容
语法:.class属性值{}
注意:也是我们用的最多的选择器
4.通配选择器
语法:*{}
作用:选中所有的标签
以上几种选择器,都是较为简单的选择器,下面来看几种复杂选择器
5.复合选择器
a.交集选择器
作用:选中同时满足选择器1选择器2选择器3····对应的内容
语法:选择器1选择器2·····{}
注意:如果选择器中有标签选择器,那么标签选择器必须放在首位
b.并集选择器(群组选择器)
作用:同时选中选择器1,选择器2·····对应的内容
语法:选择器1,选择器2,选择器3·····{}
6.关系选择器
在介绍关系选择器之前,我们需要先了解一下元素之间的关系,主要有如下三种:
(1)父子关系
直接包含和被包含的关系
父元素:直接包含子元素
子元素:直接被父元素包含
(2)祖先后代关系
直接或间接包含和被包含的关系(包括父子关系在内)
祖先元素:直接或间接包含后代元素
后代元素:直接或间接被祖先元素包含的
(3)兄弟关系
拥有共同的父元素
由此衍生而来的关系选择器有:
a.子元素选择器:
作用:通过指定的父元素找到指定的子元素
语法:父元素>子元素{}
b.后代选择器
作用:通过指定的祖先元素找到指定的后代元素
语法:祖先元素 后代元素{}
c.下一个兄弟选择器
作用:通过指定的兄找到指定的弟
语法:兄+弟{}
d.所有兄弟选择器
作用:通过指定的兄找到下面所有的兄弟
语法:兄~弟{}
CSS选择器的种类远不止以上几种,其余内容我们下一篇文章继续探讨