欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS选择器权重问题

程序员文章站 2023-12-10 08:06:28
css选择器权重问题 原则 原则一: 继承不如指定 原则二: #id > .class > 标签选择符 原则三:越具体越强大 原则四:标签#id >#id ; 标签.class &...
css选择器权重问题

原则

原则一: 继承不如指定

原则二: #id > .class > 标签选择符

原则三:越具体越强大

原则四:标签#id >#id ; 标签.class > .class

css优先级权重计算法

css优先级包含四个级别(标签内选择符,id选择符,class选择符,元素选择符)以及各级别出现的次数!

根据这四个级别出现的次数计算得到css的优先级。

css优先级的计算规则如下:

元素标签中定义的样式(style属性),加1,0,0,0 每个id选择符(如 #id),加0,1,0,0 每个class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1

然后,将这四个数字分别累加,就得到每个css定义的优先级的值,

然后从左到右逐位比较大小,数字大的css样式的优先级就高。

例子:

css文件或

h1 {color: red;}

/* 一个元素选择符,结果是0,0,0,1 */

body h1 {color: green;}

/* 两个元素选择符,结果是 0,0,0,2 */

h2.grape {color: purple;}

/* 一个元素选择符、一个class选择符,结果是 0,0,1,1*/

li#answer {color: navy;}

/* 一个元素选择符,一个id选择符,结果是0,1,0,1 */

元素的style属性中如下定义:

h1 {color: blue;}

/* 元素标签中定义,一个元素选择符,结果是1,0,0,1*/

如此以来,h1元素的颜色是蓝色。

注意:

1、!important声明的样式优先级最高,如果冲突再进行计算。

2、如果优先级相同,则选择最后出现的样式。

3、继承得到的样式的优先级最低。

结论是:比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数

important->内联->id->类->标签|伪类|属性选择->伪对象->继承->通配符->继承

最后汇总为一张表

选择器 表达式或示例 说明 权重

id选择器 #aaa 100

类选择器 .aaa 10

标签选择器 h1 元素的tagname 1

属性选择器 [title] 10

相邻选择器 selecter+selecter 拆分为两个选择器再计算

兄长选择器 selecter~selecter 拆分为两个选择器再计算

父子选择器 selecter>selecter 拆分为两个选择器再计算

后代选择器 selecter selecter 拆分为两个选择器再计算

通配符 * 0

各种伪类选择器 如:link,:vusited,:hover,:active,:target,:root,:not等 10

各种伪元素 如::first-letter,::first-line,::after,::before,::selection 1