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。
继承的样式没有权值