池州网站公司欢迎您
技术教程首页 > 技术教程

CSS权重

作者
池州网站公司
发布时间
2018-05-23

css权重很多人都听过,也了解一些,但是很多人对具体的规则或者说再深如一些关于css权重的问题,可能会不那么清楚。日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能

css权重很多人都听过,也了解一些,但是很多人对具体的规则或者说再深如一些关于css权重的问题,可能会不那么清楚。日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减少调试css规则的时间,深刻理解css权重,就十分关键了。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。

权重规则总结:

!important 优先级最高,但也会被权重高的important所覆盖

行内样式总会覆盖外部样式表的任何样式(除了!important)

单独使用一个选择器的时候,不能跨等级使css规则生效

如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效

如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.

权重相同时,与元素距离近的选择器生效

css权重优先级用来干嘛?

在同一个元素使用不同的方式,声明了相同的一条或多条css规则, 浏览器会通过权重来判断哪一种方式的声明,与这个元素最为相关,从而在该元素上应用这个声明方式声明的所有css规则 。

权重的五个等级及其权重

!important;

行内样式;

ID选择器, 权重:100;

class,属性选择器和伪类选择器,权重:10;

属性选择器指的是:根据元素的属性及属性值来选择元素,比如button的type属性等。 伪类选择器: :active :focus等选项.

标签选择器和伪元素选择器,权重:1;

伪元素选择器: :before :after

等级关系:

!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

权重规则:

1.不推荐使用!important

不推荐使用

!important

,因为

!important

根本没有结构与上下文可言,并且很多时候权重的问题,就是因为不知道在哪里定义了一个

!important

而导致的。

覆盖important:

虽然我们应该尽量避免使用!important,但你应该知道如何覆盖important,加点权重就可以实现,codepen的 demo

//!important 优先级最高,但也会被权重高的important所覆盖aaa#a{ background: blue !important; /* id的important覆盖class的important*/} .a{ background: red !important; }

2.行内样式总会覆盖外部样式表的任何样式,会被

!important

覆盖

3.单独使用一个选择器的时候,不能跨等级使css规则生效

无论多少个class组成的选择器,都没有一个ID选择器权重高。类似的,无论多少个元素组成的选择器,都没有一个class选择器权重高、无论多少个ID组成的选择器,都没有行内样式权重高。

codepen的 demo ;

在demo中使用了11个class组成一个选择器,最后还是一个ID选择器,设置的样式生效。

可以想象在玄幻小说的那种等级制度,没有突破那个等级,就没有可比性。

所以权重是在双方处于同一等级的情况下,才开始对比。

4.如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效

选择器可能会包含一个或者多个与权重相关的计算点,若经过权重值计算得到的权重值越大,则认为这个选择器的权重高。举一个简单的栗子:

.test #test{ } // id 100+class 10=110;.test #test span{} // id 100+class 10+span 1=111;.test #test .sonClass{} // id 100+class 10+class 10=120; //生效

5.如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.

demo

啦啦啦

#test span{ color:blue; } #app span{ // 生效 因为后面出现 color: red; }

6.权重相同时,与元素距离近的选择器生效

比如不同的style表,head头部等,来看下面的栗子:

#content h1 { // css样式表中 padding: 5px; }

建议:

避免使用

!important

;

利用id增加选择器权重;

减少选择器的个数(避免层层嵌套);

结语

以上就是本文关于css权重的内容了,如有不对的地方欢迎指正!希望大家看完可以有所收获,喜欢的话,赶紧点波

栏目最新

全站导航

资料检索


服务支持

合作流程

网站制作流程从提出需求到网站制作报价,再到网页制作,每一步都是规范和专业的。

常见问题

提供什么是网站定制?你们的报价如何?等网站建设常见问题。

售后保障

网站制作不难,难的是一如既往的热情服务及技术支持。我们知道:做网站就是做服务,就是做售后。

拉丁传说

好的网站制作公司会给客户提出建设性的意见,善于对客户进行良性引导,避免客户走入误区,甚至帮助客户整理文案做好内容规划,会帮助客户构造互联网的升级计划...

联系我们

池州网页设计联系方式:
技术联系人:方先生
在线QQ:75054921
微信:13665664868
手机:13665664868

支付宝

支付宝付款码

Copyright © 2012-2018 池州拉丁传说网页设计工坊 版权所有