CSS选择器

选择器：
让我们可以更加精确的选择，自己想要设置样式的标签 （选择标签）

1、标签名选择器
直接用标签名作为该选择器的名字

2、类选择器

3、id选择器

4、后代选择器
父代与子代之间用空格隔开

5、群组选择器
同时选择多个具有相同样式的选择器用逗号隔开

6、组合选择器
组合选择器可以可以通过不同选择器的组合去寻找同时满足两者条件的标签

7、通配符选择器
选择页面上的所有标签，优先级最低。 一般用来初始化所有样式

8、属性选择器（[ ]）

/*匹配带有该属性的标签*/ ???????????[href]{ ???????????}匹配带有该属性的该标签 ???????????a[href]/*匹配带有该属性和属性的值的标签*/ ???????????a[href="http://www.baidu.com"]{ ?????????????????????????}/*匹配该属性中包含该单词的标签（以空格决定是否为一个单词）*/ ???????????a[href~="#"]{ ???????????}/*匹配该属性中以该字符开头的标签（以横线区分）*/ ???????????a[href|="#"]{ ???????????}/*匹配该属性中以该字符开头的标签（不用区分）*/ ???????????a[href^="#"]{ ???????????????????????????}/*匹配该属性中以该字符结尾的标签（不用区分）*/ ???????????a[href$="#"]{ ???????????}/*匹配该属性中包含该字符的标签（不用区分）*/ ???????????a[href*="#"]{ ???????????}

9、兄弟选择器

 ??????直系子级选择器 ???????????.div1>div{ ??????????????????????????????????} ???????同级兄弟选择器。（选择div2后面兄弟关系的所有div） ???????????.div2~div{ ?????????????????????????????????????}

10、子元素选择器

 ???????选择该选择器的父级的第（）个直系子级，如果是该标签，则改变，否则不变 ???????n是从0开始的自然数 ???????????.warp div:nth-child(3n+2){ ??????????????????????????} ???????????从后向前查 ???????????.warp div:nth-last-child(3n+2){ ???????????????????????????} ???????????只选择第一个标签，如果是该标签就有效，不是则无效 ???????????.warp div:first-child{ ???????????} ???????????只选择最后一个标签，如果是该标签就有效，不是则无效 ???????????.warp div:last-child{ ???????????} ???????????数的时候，只计算该标签 ???????????.warp div:nth-of-type(2n){ ??????????????????????????} ???????????从后向前数 ???????????.warp div:nth-last-of-type(2n){ ???????????????????????????} ???????????遇到的第一个div标签 ???????????.warp div:first-of-type{ ???????????????????????????} ???????????倒数遇到的第一个div标签 ???????????.warp div:last-of-type{ ??????????????????????????} ???????????唯一该型标签即生效 ???????????.warp div:only-of-type{ ???????????????????????????} ???????????唯一子级即生效 ???????????.warp div:only-child{ ???????????}

CSS选择器

原文地址：https://www.cnblogs.com/heson/p/10013942.html