基础选择器
元素选择器；类选择器；id选择器
通配符选择器
通配符选择器是解决兼容性的
格式：* +声明块
例：* {color：red；}
并集选择器
格式：元素或类或ID+“，”+元素或类或ID+声明块
例：h1,h2,h3{color:red;}
p,.container,#box{color:red;}
层次选择器
子集选择器
格式：父级元素名称+“>”+子级元素名称+声明块
例：article>footer{color:red;}
后代选择器
格式：祖先元素名称+“空格”+后代元素名称+声明块
例：div p{color:red;}
兄弟选择器
格式：兄弟元素A+兄弟元素B+声明块
例：div+p{color:red;}
兄弟选择器只能选中紧挨着元素A后面的第一个元素
通用选择器
格式：兄弟元素A+“~”+兄弟元素B+声明块
例：div~p{color:red;}
表示可以选择元素A后面任意位置的同级元素
伪类选择器
动态伪类选择器
1、未访问
格式：a:link+声明块
例：a:link{color:black;}
2、已访问
格式：a:visited+声明块
例：a:visited{color:green;}
3、悬停（当鼠标停留在链接上时的样式）
格式：a:hover+声明块
例：a:hover{color:deeppink;}
可以运用到其他标签，但：在移动端用不了
4、点击时
格式：a:active+声明块
例：a:active{color:deeppink;}
以上四个伪选择器按顺序编写，1，2可以互换顺序，3，4顺序不能动
焦点框（多用于输入框肯链接）
格式：a:focus+声明块
例：a:focus{color:red;}
以上5个伪选择器编写顺序为：
link,cisited,focus,hover,active
结构伪类选择器
格式：元素名称+“：nth-child(n)”+{声明块}
例：h1:nth-child(5){color:gray;}
括号中的n表示元素的位置
表示选中第5个h1元素，颜色为灰色
表示选中第5个元素，并且满足是h1的情况，才会应用样式
2n表示偶数，2n+1是奇数，n是从0开始的
如果要选择后5个：n+6(6表示从第6个开始到最后一共只有5个)
如果要选择前3个：-n+4
格式：元素名称+“：nth-of-type(n)”+{声明块}
例：h1:nth-of-type(5){color:gray;}
表示选中类别为h1的第5个h1
表示先筛选出所有的h1标签，然后在结果里选中第5个h1
格式：元素名称+“：first-child”+{声明块}
例：h1:first-child{color:gray;}
表示选中第1个h1元素
格式：元素名称+“：last-child”+{声明块}
例：h1:last-child{color:gray;}
表示选中最后1个h1元素
格式：元素名称+“：nth-child(odd)”+{声明块}
例：h1:nth-child(odd){color:gray;}
表示选中奇数项
odd也可以写成2n+1
格式：元素名称+“：nth-child(even)”+{声明块}
例：h1:nth-child(even){color:gray;}
表示选中偶数项
even也可以写成2n
否定伪类选择器
格式：元素名称+“：not(相应的选择条件)”+{声明块}
例：h1:not(:not-child(3)){color:grat;}
表示除第3个h1元素外，都应用样式
格式：元素名称+“：only-of-type”+{声明块}
例：body>h2:only-of-type{color:red;}
表示选择类型为h2的元素，并且body里只包含一个h2元素时样式才生效，包含多个h2元素样式不生效
格式：元素名称+“：only-child”+{声明块}
例：body>h2:only-child{color:red;}
表示选择类型为h2的元素，并且body元素里只有一个子元素，并且这个子元素是h2元素时才生效，body包含多个子元素，样式不生效
伪元素选择器
格式：元素名称+“：before”+{content:"加的内容"}
例：h1:before{content:"f51"}
表示在元素前面加内容
格式：元素名称+“：after”+{content:"加的内容"}
例：h1:after{content:"f51"}
表示在元素后面加内容
选中第一行：
p:first-link{color:颜色；}
选中第一个字：
P:first-letter{color:颜色；}
设置鼠标选中内容的背景色和字体颜色：
p:selection{ margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; ">color：颜色；}
CSS选择器
原文地址：https://www.cnblogs.com/lp1995/p/9217238.html