CSS【选择器】学习笔记

0. 选择器优先级

选择器优先级由高到低顺序如下：

!important 最高

内联样式 +1000

id选择器 +100

类选择器=伪类选择器=属性选择器 +10

标签选择器=伪元素选择器 +1

* 通配符选择器 +0

如果选择器的优先级相同，CSS代码中靠后的CSS规则优先级高于靠前的规则。

直接样式 > 祖先样式，最近的祖先样式 > 其他祖先样式 。

E#id > #id 、E.class > .class

.not伪类不参与权重计算，但是会计算它小括号中选择器的权重。

1. 简单选择器

E F

匹配所有被E包含的F元素集合。

E>F

匹配E元素的所有一级子元素F。

E+F

匹配紧跟在E元素之后的F元素。

E~F

匹配E元素后面的所有F兄弟元素，同级同类。

E,F

同时为多个选择器设置相同的CSS样式规则。

2. 结构伪类选择器

E：not(s)

从E匹配的元素集合中删除s选择器参数所匹配的元素。
若s有子元素，不会对其子元素产生影响。

E：root

匹配文档中E的根元素，E一般为html。

E：lang(s)

使用s语言时的E元素的样式。

E：empty( )

匹配内容为空的E类型元素。

E：target

匹配被激活的目标元素，点击锚点链接时，目标元素被激活。

E：first-child、E：last-child、E：only-child

匹配类型为E的父元素、下的第一个/最后一个/唯一一个子元素（E为css选择器）。
注意，不是E的第一个子元素，而是父元素下的第一个E类型。

E：nth-child(n)、