id选择器
- 语法:#id属性值{}
#box{} #red{}
类元素选择器
- 语法:.class属性值{}
通配选择器
- 作用:选中页面中的所有元素
- 语法:*{}
交集选择器
- 作用:选中同时符合多个条件的元素
- 语法:选择器1选择器2…选择器n{}
- 交集选择器中如果有元素选择器,必须使用元素选择器开头
div.weight{ … }
选择器分组(并集选择器)
- 作用:同时选择多个选择器对应的元素
- 语法:选择器1,选择器2,…,选择器n{}
h1, span{ … }
#b1, .p1, h1, div.weight { … }
子元素选择器
- 作用:选中指定父元素的指定子元素
- 语法:父元素 > 子元素{}
div > span { … }
后代选择器
- 作用:选中指定元素内的指定后代元素
- 语法:祖先 后代{}
div span { … }
//范围比子元素更广
兄弟元素选择器
- 作用1:选择下一个兄弟
- 语法1:前一个 + 下一个{}
p + span{ … }
// 紧挨着(下一个) - 作用2:选择下边所有的兄弟
- 语法2:兄 ~ 弟{}
p ~ span { … }
// 下边的所有的兄弟元素 (上边的兄弟不选)
属性选择器
- [属性名] 选择含有指定属性的元素
- [属性名 = 属性值] 选择含有指定属性和属性值的元素
- [属性名
^=
属性值] 选择属性值以指定值开头的元素 - [属性名
$=
属性值] 选择属性值以指定值结尾的元素 - [属性名
*=
属性值] 选择属性值中含有某值的元素的元素
伪类选择器
- 伪类(不存在的类、特殊的类)
- 伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素… - 伪类一般情况下都是使用
:
开头
:first-child
// 第一个子元素
:last-child
// 最后一个子元素
:nth-child( n )
// 选中第n个子元素- 特殊值:
- n 第n个 n的范围0到正无穷
- 2n 或
even
表示选中偶数位的元素 - 2n+1或
odd
选中奇数位的元素
- 特殊值:
- 以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type
- 这几个伪类与上述类似,不同点是它们在同类型元素中排序
:not( ) 否定伪类
:将符合条件的元素从选择器中去除:link
用来表示没访问过的链接(正常的链接):visited
用来表示访问过的链接 (只能修改链接的颜色):hover
用来表示鼠标移入的状态:active
用来表示鼠标点击
- 伪类用来描述一个元素的特殊状态
伪元素选择器
- 伪元素:表示页面中一些特殊的并不真实存在的元素(特殊的位置)
- 伪元素使用
::
开头
::first-letter
表示第一个字母
::first-line
表示第一行
::selection
表示选中的内容
- 伪元素使用
::before
元素的开始
::after
元素的最后
- before 和 after 必须结合content属性来使用
选择器权重
选择器 | 权重 |
---|---|
内联样式 | 1,0,0,0 |
id选择器 | 0,1,0,0 |
类和伪类选择器 | 0,0,1,0 |
元素选择器 | 0,0,0,1 |
通配选择器 | 0,0,0,0 |
继承的样式 | 没有优先级 |
- 比较优先级时,需要将所有的选择器的优先级进行相加比较,优先级高的先显示(分组选择器是单独计算的)
- 选择的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
- 如果优先级计算后相同,此时优先使用靠下的样式
- 在某一个样式后面添加
!important
,则该样式会获取到最高的优先级,甚至超过内联样式(在开发中慎用)