分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

CSS选择器的权重计算

发布时间:2023-09-06 01:41责任编辑:赖小花关键词:CSS选择器

什么是CSS选择器权重?

即使在不太复杂的样式表中,要寻找同一元素可能有两个或者更多规则,当同一元素被多个不同来源的样式规则设置了样式后,如何处理样式规则的冲突,显示元素最后的样式,用到的计算规则就是CSS选择器的权重规则。

根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的特殊性相同,那么后定义的规则优先。

特殊性

为了计算规则的特殊性,给每种选择器都分配一个数字值。然后,将规则的每个选择器的值加在一起,计算出规则的特殊性。特殊性的计算不是以10为技术的,而是采用一个更高的未指定的基数。这能确保非常特殊的选择器(比如ID选择器)不会被大量一般选择器(比如类型选择器)所超越。但是,为了简化,如果在一个特定选择器中的选择器数量少于10个,那么可以以10为基数计算特殊性。

选择器的特殊性分成4个成分等级:a, b, c 和 d。

  • 如果样式是行内样式,那么a=1

  • b等于ID选择器的总数

  • c等于类,伪类和属性选择器的数量

  • d等于类型选择器和伪元素选择的数量

使用这些规则可以计算任何CSS选择器的特殊性。下面的表格给出了一系列选择器以及相应的特殊性。

选择器特殊性以10为技术的特殊性
Style=" "1,0,0,01000
#wrapper #content {}0,2,0,0200
#content .name {}0,1,1,0110
div#ontent {}0,1,0,1101
#content {}0,1,0,0100
p.comment .name {}0,0,2,121
p.comment {}0,0,1,111
div p {}0,0,0,22
p {}0,0,0,11

用style属性编写的规则总是比其他任何规则特殊。具有ID选择器的规则比没有ID选择器的规则特殊,具有类选择器的规则比只有类型选择器的规则特殊。如果两个规则的特殊性相同,那么后定义的规则优先。

CSS选择器的权重计算

原文地址:https://www.cnblogs.com/nanxia/p/8411992.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved