选择器的优先级和伪类的顺序

版权声明:本BLOG上原创文章未经本人许可,不得用于商业用途及传统媒体。网络媒体转载请注明出处,否则属于侵权行为。 https://blog.csdn.net/liaoxuewu/article/details/82783295

1.选择器的优先级

(1)样式的继承

像儿子可以继承父亲的财产一样,在CSS中,祖先元素上的样式也会别后代元素所继承,利用继承可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会继承这些样式。继承时对开发的一种简化,通过继承我们可以将元素共有的样式统一设置给祖先元素,这样就只需要设置一次,就给所有的元素设置了样式。
注:但是并不是所有的样式都会被子元素所继承,比如:背景相关的、边框相关的、定位相关的样式都不会被子元素所继承。具体情况参考文档。

(2)优先级

当选择不同的选择器,选中同一个元素时并且设置相同的样式时,这样样式之间就会产生冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)来决定,优先级高的优先显示。
优先级的规则:

内联样式,优先级1000
id选择器,优先级100
类和伪类,优先级10
元素选择器,优先级1
通配选择器,优先级0
继承的样式没有优先级
当选择器包含多种选择器时,需要将多种选择器的优先级相加然后进行比较。但是注意,选择器的优先级计算不会超过他的最大数量级,如果选择器的优先级一样,则使用靠后的样式。
并集选择器的优先级时单独计算。
可以在样式的最后添加一个!important,则此时该样式会获得一个最高的一个优先级,将会超过所有的样式甚至超过内联样式,所以在开发中尽量避免使用。

2.伪类的顺序

涉及到a的伪类一共四个:
:link
:visited
:hover
:active

这四个选择器的优先级是一样的。

猜你喜欢

转载自blog.csdn.net/liaoxuewu/article/details/82783295