css之选择器
常用选择器
元素选择器
- 语法:标签名{}
- 例子:p{}
id选择器
- 语法:#id属性值{}
- 例子:#xxx{}
类选择器
- 语法:.class属性值{}
- 例子:.xxx{}
通配选择器
- 语法:*
- 例子:*{}
复合选择器
交集选择器
- 作用:同时满足多个条件
- 语法:选择器1选择器2选择器3……选择器n{}
- 例子:div.hello{}
- 值得注意:交集选择器如果有元素选择器,必须使用元素选择器开头
并集选择器
- 作用:同时选择多个元素
- 语法:选择器1, 选择器2, 选择器3, ……, 选择器n{}
- 例子:h1, span{}
关系选择器
子元素选择器
- 作用:选中指定父元素的指定子元素
- 语法:父元素 > 子元素
- 例子:div > span {}
后代选择器
- 作用:选中指定元素内的指定后代元素
- 语法:祖先 后代
- 例子:div span{}
兄弟选择器(两种)
- 选择下一个兄弟
- 语法:前一个 + 下一个
- 选择下边所有的兄弟
- 语法:兄 ~ 弟
**属性选择器**
- 语法:
- [属性名] 选择含有指定属性的元素
- [属性名=属性值] 选择含有指定属性和属性值的元素
- [属性名^=属性值] 选择属性值以指定值开头的元素
- [属性名$=属性值] 选择属性值以指定值结尾的元素
- [属性名*=属性值] 选择属性值中含有某值的元素
- 例子:
- p[title]{}
- p[title=abc]{}
- [title^=abc]{}
- [title$=abc]{}
**伪类选择器**
-
语法:一般都是使用 : 开头
-
:first-child 第一个子元素
-
:last-child 最后一个子元素
-
:nth-child( ) 选中第n个子元素
- n 第n个
- 2n 或 even 表示选中偶数位的元素
- 2n+1 或 odd 表示选中奇数位
-
例子:
ul > li:first-child{ color: red; } ul > li:last-child{ color: red; } ul > li:nth-child(even){ color: red; } …………
但是:nth-child()是根据所欲元素排序的,为了对指定类型排序操作,所以又有
-
:first-of-type
-
:last-of-type
-
:nth-of-type()
-
例子
ul > li:first-of-type{ color: red; } /* 这里 :not() 也是一个用法 ul > li:not(:nth-of-type(3)){ color: red; }
-
-
伪类拓展补充:
-
:link 用来表示没访问过的链接(正常链接)
a:link{ color: red; font-size: 50px; }
-
:visited 用来表示访问过的链接(由于隐私的原因,所有visited这个伪类只能修改链接的颜色)
a:visited{ color: red; }
-
:hover 用来表示鼠标移入的状态
a:hover{ color:red; font-size: 50px; }
-
:active 用来表示鼠标点击
a:active{ color: red; font-size: 50px; }
-
**伪元素选择器**
-
语法:使用 :: 开头
- ::first-letter 表示第一个字母
- ::first-line 表示第一行
- ::selection 表示选中的内容
- ::before 元素的开始
- ::after 元素的最后(before 和 after必须结合 content 属性来使用)
-
例子:
p::first-letter{ font-size: 50px; } p::first-line{ background-color: red; } p::selection{ background-color: red; } p::before{ content: 'abc'; color: red; } p::after{ content: 'haha' color: red; }
最后,选择器的优先级:
内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承的样式
注意:
- 交集选择器优先级可相加。
- 分组选择器优先级不可相加。
- 样式后加 ! important,则优先级最高,甚至超过内联样式。