day042 前端CSS选择器

今日内容:

高级选择器

1.子类选择器

用 > 表示

类比于相对路径

选择的是前一级标签的子标签

2后代选择器

用空格表示

选择的是前一级标签的后代标签

3并集选择器

用,逗号表示

选择的是用逗号连接的标签

4交集选择器

用标签名字作为开头 ,后面跟id或者是类选择器(注意,没有空格)

5.通用选择器

*选择所有的标签(使用场景一般是删除所有的空格)

6.属性选择器

[属性名] 带这个属性的标签

[属性名=’’需要匹配的属性值’’ ] 带有属性,属性名符合匹配的要求

[属性名^=’xxxx’]  匹配以xxx开头的字符串

[属性名$=’xxxx’]  匹配以xxx结尾的字符串

[属性名*=’xxx’]  匹配属性值包含的字符串

7.伪装选择器

简称: a :LoVe HAte  爱恨

Link  未被访问的链接

Visited  访问过的链接

Hover  鼠标悬停的样式

Active  鼠标按下时的样式

选择标签

选择第一个孩子标签:

:first-child

选择最后一个孩子标签

:last-child

选择指定的孩子标签:

:nth-child(n)  选择第N个孩子

选择指定的字符:

P : first-letter : 选择第一个字符

P : before  在标签的最前面添加一个标签内容

P : after  在标签的最后面添加一个标签内容

8.继承性

子标签可以继承父标签的样式:

Color

Font- ,

Text-

Line-

9.层叠性

(选择器权重相同的时候) 后面添加的样式会覆盖全面的样式

10.权重

类比id标签 100 ,类标签 10, 普通标签 1 谁的分高谁的权重大

Id 100

类 10

普通标签 1

!important 权重无限大

如果都有!important的时候,比较权重的大小