选择器:通过选择器可以选中页面中指定元素。
一。常用选择器:
1.元素选择器
根据标签名来选中元素
例:p{},div{},span{}
2.id选择器
根据元素的id属性值选中一个元素
例:#box{}, #box1{}
3.类选择器
根据元素的class属性值选中一组元素(可以重复使用)
4.通配选择器
选中页面中的所有元素
5.复合选择器
选中同时复合多个条件的元素(交集选择器)
语法:选择器1选择器2选择器3{}
注意:交集选择器中如果有元素选择器,必须使用元素选择器开头
6.选择器分组 (并集选择器)
同时选择多个选择器对应的元素
二。关系选择器
父元素 --直接关系
子元素--直接关系
祖先元素--直接或间接关系
后代元素 --直接或间接关系
兄弟元素--平行 (拥有相同的父元素)
1.子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
选中类box下(父元素)的第一个span(子元素)
2.后代元素选择器
选中指定元素内的指定后代元素
语法:祖先 后代
选中div下的所有span元素
3.兄弟元素选择器
(1)选择下一个兄弟(紧挨着的那个)
语法:前一个 + 下一个
p和span拥有相同的父元素,并且span紧挨着p
(2)选择下边所有兄弟
语法: 兄 ~ 弟
选中p和span拥有相同的父元素,p下边的所有span
三。属性选择器
(1)属性选择器
[属性名]选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性名和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值以包含指定值的元素
(2)伪类和伪元素
伪类:(不存在的类,特殊的类)
伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素
伪类一般情况下都是使用 :开头
例如:
:first-child 第一个子元素;
:last-child 最后一个子元素;
:nth-child() 第n个子元素;
n 第n个 n的范围是0到正无穷
2n 或even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
伪元素
::before 表示元素的最开头
::after 表示元素的最末尾
before和after 必须结合content属性来使用
伪元素的使用实例:
四。选择器的优先级
选择器权重:优先级越高,越优先显示
!important 最高的优先级
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式 没有优先级
注意:
(1)比较优先级时,需要将所有的选择器的优先级进行相加计算,优先级越高,越先 显示。
(2)“选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器。
(3)如果优先级计算后相同,此时则优先级使用靠下的样式。