摘要：选择器的权重第一种情况样式表中只有单一样式即内联元素第二种情况组合选择器从左往右逐个比较，按进行比较越大权重越高。
css选择器的权重
1第一种情况：
样式表中只有单一样式：
即 内联>id>class>元素
#id{} .class{} p{}
2第二种情况：
组合选择器
从左往右逐个比较，按a,b,c,d 进行比较 越大权重越高。
权限值生成方法
按权重由高到低书写,不按选择器的顺序写
eg:
/*bbc */
#dii .dd #ip{
color: palevioletred;
}
/*bcc */
#dii .dd .cp{
color: paleturquoise
}
/*bbb */
#dii>#idd>#ip{
color: yellowgreen;
}
这个里面权重顺序 bbb>bbc>bcc
3 单个和组合混淆
eg:
/*bcc */
#dii .dd .cp{
color: paleturquoise
}
/*bbc */
#dii .dd #ip{
color: palevioletred;
}
/*bbb */
#dii>#idd>#ip{
color: yellowgreen;
}
-------------------------------------
单个
/*b */
#ip{
color: cyan;
}
权重顺序 bbb>bbc>bcc>b
总结：
权重值从左往右逐个比较，如第一个位置与另一组的第一个比较，有大小权重关系就不在比较后面的，如相等 继续比较后面的，如果是比较的组合一个有值另一个没值，有值权重更高。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115712.html
摘要：优先级是由权重来作为衡量标准的，权重的计算有一套计算公式，有如下规范使用一个位数的字串来表示级别，从左到右，左边的做大，往右依次递减，且数位之间没有进制，级别之间不可逾越。定义了一个命令，该命令被赋予最大的优先级。一、背景 CSS有三大特性：层叠性、继承性、优先级。 而我们在给CSS定义样式的时候，经常出现两个及以上的规则应用在同一元素上，单该元素最终在浏览器呈现的效果是应用的哪个规则呢？这...
摘要：样式选择器权重优先级如下的权重为选择器的权重为类选择器的权重为伪类选择器的权重为属性选择器的权重为标签选择器的权重为伪元素选择器的权重为通配符的权重为综合上述权重优先级来看，正确的优先级排序应该是内联样式类伪类属性选择标签伪元素继承通配符 CSS选择器是编写CSS代码时的一个核心概念，选择器定义了相应的样式将会影响到文档中的哪些部分，以下是自己在学习及工作过程中对CSS选择器的一些总结...
摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。 它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。 首先，我们要明确的了解样式是怎么被渲染的。 具体的...
摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。 它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。 首先，我们要明确的了解样式是怎么被渲染的。 具体的...
摘要：前端杂谈权重权重想必大家都听说过一些简单的规则大部分人也都知道较长的权重会大于较短的权重高于但是具体规范是什么浏览器是按照什么标准来判定不同选择器的权重的呢让我们来看一下官方文档是怎么说的第一个关键词官方文档中用特异性来表示一个和其元素的相 前端杂谈: CSS 权重 (Specificity) css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css sele...
阅读 1075·2021-11-19 09:40
阅读 2215·2021-11-15 18:00
阅读 1267·2021-10-18 13:34
阅读 2250·2021-09-02 15:40
阅读 1536·2019-08-30 14:01
阅读 1115·2019-08-30 11:11
阅读 2484·2019-08-29 15:26
阅读 723·2019-08-29 14:15
