手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > 教程知识 > 文章 当前位置: 教程知识 > 文章

学css前要搞懂的选择器的优先级和权重问题

时间:2020-03-05    点击: 次    来源:网络    作者:佚名 - 小 + 大

css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中的重点啊!啪啪啪打脸!

 

优先级关系

先来看css为元素添加样式的几种规则(优先级a>b>c>d,!important无敌)

标记

a

b

c

d

规则

使用行内样式style

使用id选择器

使用类、属性、伪类选择器

使用元素、伪元素选择器 

例子

style=""

#id

class 、 [type="submit'] 、 :hover

 p、::after

 

权重计算

用a,b,c,d分别表示相关规则出现的次数

选择符 权重(a,b,c,d)   权值
style=""        (1,0,0,0)        1000
#wrapper #content (0,2,0,0) 200
#content .datePosted  (0,1,1,0) 110
div #content{} (0,1,0,1) 101
#content  (0,1,0,0) 101
p.comment .datePosted{}  (0,0,2,1) 21
p.comment{}  (0,0,1,1) 11
div p{}  (0,0,0,2) 2
(0,0,0,1) 1
.container .row .col-left  (0,0,3,0) 30
.col-left  (0,0,1,0) 10

 

补充

1.虽然提高选择器的权重值能有效解决靠后的渲染失败问题,但也仅仅是个解决方法,渲染不冲突的情况下,不要写那么多累赘

2.!important虽无敌和style虽一人之下,但都应尽量避免使用

3.在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 > 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。

上一篇:css背景颜色透明度

下一篇:没有了

浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM