选择器的优先级和伪类的顺序_liaoxuewu的博客-程序员宅基地_选择器优先级

技术标签: 样式的继承  HTML、CSS  伪类  选择器优先级  

1.选择器的优先级

(1)样式的继承

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

(2)优先级

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

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

2.伪类的顺序

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/liaoxuewu/article/details/82783295

智能推荐

随便推点