选择符
名称
描述
*
通配选择符
所有元素对象
E
类型选择符
匹配对应的标签
#
id选择符
以唯一标识符id属性作为对象的选择符
.
class选择符
以包含对应的class属性作为对象的选择符
一般我们在CSS样式表里面加入*{margin:0;padding:0},清除所有元素的内外边距
选择符
名称
描述
div p
包含(后代)选择符
选择div元素里面的所有p元素(儿子，包括孙子…)
div>p
子选择符
选择p元素的父亲是div元素的所有p元素(儿子)
div+p
相邻选择符
div元素之后的一个p元素，同级，只能从div元素的位置向后查找
div~p
兄弟选择符
div元素之后的所有p元素，同级，只能从div元素的位置向后查找
选择符
描述
E[att]
选择具有att属性的E元素
E[att=“val”]
选择具有att属性且属性值等于val的E元素
E[att^=“val”]
匹配具有att属性、且值以val开头的E元素
E[att$=“val”]
匹配具有att属性、且值以val结尾的E元素
E[att*=“val”]
匹配具有att属性、且值中含有val的E元素
E[att~=“val”]
选择具有att属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素，或者只有一个值且该值就等于val
E[att|=“val”]
E拥有att属性，并且值为val，或者值是以val-开头的
div[ class ~ = 'a' ] { }
div[ class |= 'a' ] { }
< div class = "a" > 1 < / div>
< div class = "ab" > 2 < / div>
< div class = "a b" > 3 < / div>
< div class = "a-b" > 4 < / div>
< div class = "b-a-c" > 5 < / div>
选择符
描述
a:link
设置超链接a在未被访问前的样式
a:visited
设置超链接a在其链接地址已被访问过时的样式
E:hover
设置元素在其鼠标悬停时的样式，基本上所有元素都有hover
E:active
设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
E:focus
设置元素成为焦点(该元素的onfocus事件发生)时的样式
E:not(s)
匹配不含有s选择符的元素E
E:root
匹配E元素在文档的根元素
E:first-child
匹配父元素第一个子元素E
E:last-child
匹配父元素最后一个子元素E
E:only-child
匹配父元素仅有的一个子元素E
E:nth-child(n)
匹配父元素的第n个子元素
E:nth-last-child(n)
匹配父元素的倒数第n个子元素
E:first-of-type(n)
匹配父元素下第一个类型为E的子元素
E:last-of-type
匹配父元素下所有类型为E的子元素倒数一个
E:only-of-type
匹配父元素所有子元素唯一一个类型为E的的子元素
E:nth-of-type(n)
匹配父元素的第n个子元素E
E:nth-last-of-type(n)
匹配父元素的倒数第n个子元素E
E:empty
匹配没有任何子元素(包括text节点)的元素E
E:checked
input元素type为radio与CheckBox为选中状态时选中
E:enabled
可用状态的元素
E:disabled
禁用状态的元素
E:target
匹配相关URL指向的元素
E : not ( s) 否定伪类选择符
假定有一个列表，每个列表项都有一个条底边线，但是最后一项不需要底边线
. demo li: not ( : last- child) {
border- bottom: 1 px solid #ddd;
}
p: not ( . abc) { color: #f00; } 除了第一个，其他的p字体样色都是红色
< p class = 'abc' > 1 < / p>
< p id= 'abc' > 2 < / p>
< p class = 'abcd' > 3 < / p>
nth-child(n) 关于参数n
n是数字，就是选择第几个
关键字，even偶数，odd奇数
公式，n是从0开始计算的
公式
呈现
2n
偶数
2n + 1
奇数
5n
5 10 15 …
n + 5
从第五个开始(包含第五个)到最后
-n + 5
前5个(包含第五个)
选择符
描述
E::first-letter
设置对象内的第一个字符样式
E::first-line
设置对象内第一行的样式
E::before
设置对象前发生的内容
E::after
设置对象后发生的内容
E::placeholder
设置对象文字占位符的样式
E::selection
设置对象被选择时的颜色
CSS3将伪对象选择符（伪元素）前面的单冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效
权重决定了你的CSS样式最终的呈现效果，CSS样式我们会大量应用，给元素添加CSS样式的方式有很多，可以外部引入，可以写内部样式表，也可以写行内样式表，有时会发现自己写的CSS样式不生效。这里注意一点，CSS样式浏览器都会解析，但是最终呈现效果就是权重的影响了。
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1
类型
权重
! important
无穷
行间样式
1000
id
100
class/属性选择器/伪类:hover
10
标签选择器/伪元素:after
1
通配符
0
01. * { } === = 》0
02. li{ } === = 》1 ( 一个元素)
03. li: first- line{ } === = 》2 ( 一个元素，一个伪元素)
04. ul li { } === = 》2 （两个元素）
05. ul ol+ li{ } === = 》3 （三个元素）
06. h1+ * [ rel= up] { } === = 》11 （一个属性选择器，一个元素）
07. ul ol li. red{ } === = 》13 （一个类，三个元素）
08. li. red. level{ } === = 》21 （两个类，一个元素）
09. style= "" === = 》1000 ( 一个行内样式)
10. p { } === = 》1 （一个元素）
11. div p { } === = 》2 （两个元素）
12. . sith { } === = 》10 （一个类）
13. div p. sith{ } === = 》12 （一个类，两个元素）
14. #sith{ } === = 》100 （一个ID 选择器）
15. body #darkside . sith p { } === = 》112 ( 1 + 100 + 10 + 1 , 一个Id选择器，一个类，两个元素) < / pre>