1:多个选择器
h1, h2 {} ——h1或h2标签的所有元素
2:通配选择器
* {} ——所有元素
3:元素选择器
div {} ——所有div元素
4:类选择器
.test {} ——class属性为test的所有元素
p.test {} ——class属性为test的所有p元素
.test.test1 {} ——class属性有test、test1两个值的所有元素,包含有test、test1的三个值以上的也匹配
5:ID选择器
#test {} ——id属性为test的元素
6:属性选择器
*[title] {} ——有title属性的所有元素
p[class] {} ——有class属性的所有p元素
a[href][title] {} ——同时有href与title属性的所有a元素
a[href="ddd"] ——所有href属性值为"ddd/"的a元素
a[href="dd"][title="dd"] ——所有href属性值为"dd"且title为"dd"的a元素
p[class~="test4"] {} ——class属性值包含test4的所有p元素,对应的如class=“test test4”这样类型的会被包含
p[class^="test4"] {} ——class属性值以test4开头的所有p元素
p[class$="test4"] {} ——class属性值以test4结尾的所有p元素
p[class*="test444"] {} ——class属性值包含字串test4的所有p元素 ,对应的若有class="test44"]这样类型的会被包含
7:后代选择器
div span{} ——div元素下的所有span元素,即div可以是span的父辈,祖父辈等
div > span {} ——div元素下的所有span子元素,即span只能是div的子辈
div + span{} ——为div相邻兄弟的所有span元素,即div与span有同一父辈,且div在前
8:伪类选择器
a:link{} ——未访问过的a元素
a:visited{} ——已访问过的a元素
9:动态伪类
元素:focus{} ——指当前拥有输入焦点的元素,即接收键盘输入等方式激活的元素
元素:hover{} ——指鼠标停留的元素
元素:active{} ——指鼠标激活的元素,如点击链接或按钮的那一刻的元素样式
p:first-child{} ——指第一个p元素,不是p的第一个子元素
lang(){} ——括号内为语言,指的是某种语言下样式
10:伪元素选择器
p:first-letter{} ——指p元素段内的第一个字母
p:first-line{} ——指p元素段内的第一行
p:before{} ——指在p元素前面设置的样式,此处可添加内容以及对应样式
p:after{} ——指在p元素后面设置的样式,此处可添加内容以及对应样式
伪元素只能用于标记或段落类的块级元素,不能用于行内元素; 伪元素必须放在选择题主体后