css选择器优先级怎么比较

css选择器优先级怎么比较

CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上,CSS选择器如果细分下来,竟然多达40多种。那他们的优先级该怎么比较呢,下面就来看看吧。

● 不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2. 作为style属性写在元素内的样式

3. id选择器

4. 类选择器

5. 元素选择器

6. 通配符选择器

7. 浏览器自定义或继承

总结排序:!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

● 同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同,优先级不同

总结排序:内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级,还可以通过计算权重值来比较

总结:

1、!important > id > class > 标签;

2、!important 比 内联优先级高;

3、当同时使用多个同种类型选择器的时候,样式以选择器定义的顺序为准,与在标签内的引用顺序无关;

4、当一个选择器多次对同一属性赋予不同值的时候,以最后载入的样式为准。

推荐:css手册

以上就是css选择器优先级怎么比较的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读