CSS选择器

什么是选择器:使用css对HTML页面中的元素实现一对一,
 一对多或者多对一的控制

选择器的分类

样式

1:通用选择器

*{}

2:元素选择器

a{}

3: class类选择器

.lei{}

4: 属性选择器

[type=redio]{}

5: id选择器

#id{} //一个id只能有一个对应的元素

6:伪元素

::before{}

7:伪类

:hover{}

8:组合选择器:

有四种组合方式 :后代选择器(以空格分隔)、子元素选择器(以大于号分隔)、相邻兄弟选择器(以加号分隔)、普通兄弟选择器(以破折号分隔)

9:否定选择器

:not(.lei){}

其中比较容易弄混的就是伪元素选择器以及伪类选择器

伪类:伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如: <a> 标签的:link、:visited等。这些信息不存在于DOM树中。);还有不能被常规CSS选择器获取到的信息。(比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child来获取到。)只有一个:

伪元素:本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码),伪元素不是节点,它不会出现在DOM树中,但是在显示上会具备节点的效果
有两个::

区别
伪类与伪元素都是用于向选择器加特殊效果 ,伪类与伪元素的本质区别就是是否抽象创造了新元素 ,伪类只要不是互斥可以叠加使用, 伪元素在一个选择器中只能出现一次,并且只能出现在末尾

说到选择器便涉及到一个优先级的问题:
首先: !important>内联样式>内部样式>外部样式
选择器的优先级中:最高的是ID选择器 紧接着是:类选择器、属性选择器、伪类选择器 再下来是:元素选择器、伪元素选择器 最后是:其他选择器 至于同级的选择器一般看在页面中出现的位置,后写的生效。

选择器的权重计算:

第一等:代表内联样式,如: style=” ”,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表class,伪类和属性选择器,如.content,权值为0010。
第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值