1. 选择器分类
- id选择器
#id{} - 类选择器
.classname{} - 元素选择器
element{} - 子代选择器
part1 > part2{} - 后代选择器
part1"空格"part2{} - 兄弟选择器
后一个兄弟:part1 + part2
所有兄弟:part1 ~ part2 - 属性选择器
[id]:选择具有id属性的元素
[id=‘1’]:选择具有id属性并且属性值为’1’的元素
[class ~= ‘one’]:选择具有class属性,并且属性值之一等于’one’的元素
[class *= ‘o’]:选择具有class属性,并且属性值中包含’o’字符的元素
[class ^- ‘o’]:选择具有class属性,并且属性值以’o’开头的元素
[class $= ‘o’]:选择具有class属性,并且属性值以’o’结尾的元素 - 组合选择器(或者)
part1, part2{} - 嵌套选择器(并且)
part1part2{} - 伪类选择器
- 子代元素相关
:first-child
:last-chid
:nth-child(num/odd/even)
:fist-of-type
:last-of-type - 元素状态相关
a标签
:link
:hover
:active
:visited
其他
:checked
:default
:enabled
:disabled
:valid
:invalid
:required
:optional
- 伪元素选择器
::after
::before
::first-line
::first-letter
::selection
2. 选择器优先级
我们通过权重量化一个选择器
- 100
id选择器 - 10
类选择器,属性选择器,伪类选择器 - 1
元素选择器,伪元素选择器
在整个选择器中,每包含一个id选择器加100的特性值,其他的类推。
注:
先看级别:行内样式>内部样式>外部样式
级别相同,再看权重:权重越大,优先级越高
权重相同:后写的样式覆盖先写的样式