• 先上总结:
a. 说明:
i. 公式: (行内, Id, 类, 标签)
ii. 规则: 从左至右依次做个数上的比较, 如果同级数量一致, 则比较下一级个数, 直到某一级数量不一致, 则数量较大的一方选择器的优先级较高, 后面的数量就无需比较了。 如选择器1 (0, 0, 1, 0), 选择器2 (0, 0, 0, 3), 那么选择器1的优先级高于选择器2。如果所有的数值都一致的话, 说明两选择器相同, 那就依据css层叠性的特点. 浏览器会选择后一个选择器
b. 备注:
i. 权重叠加计算不是正常的加法计算, 不需要逢十进一。 如标签是11 类是0 那么只可以是 (0, 0, 0 , 11), 不能是(0, 0, 1, 1)
ii. * 通配符没有权重
iii. 无论父标签用了什么选择器并设置了什么样式, 对子标签来说都是继承, 继承的优先级永远是最低的。
• 准备:
先添加一段html代码
这是一个段落
之后为了能更好地查看结果, 设置点字体样式, 由于咱代码简单, 就使用一个通配符选择器设置样式
* {
font-family: 楷体;
font-size: 60px;
}
• 代码示例说明:
1. 同级数量的比较
a. 先写一个p标签选择器, 运行一下效果
/* （0, 0, 0, 1） */
p {
color: blue;
} b. 再写一个后代选择器如下, 再运行一下效果
/* (0, 0, 0, 2) */
div p {
color: aqua;
}由于后者标签数量高于前者标签数量, 所以后者选择器高
建议: 可以把b步骤的代码放在a步骤的前面 ,这样可以更好地体现优先级的关系(优先级是没有层叠性的特点), 可以更好地排除层叠性的可能(虽然根本就没这可能, 只是方便理解), 以下示例皆是如此
2. 不同级别的比较
a. 设计一个类构造器
/* (0, 0, 1, 0) */
.son {
color: darkslategray;
} b. 在p标签上加上类选择器
这是一个段落
由于类级别比标签高, 所以.son 选择器的优先级别高于div p选择器
3. 统配符没有权重的问题
首先优先级是没有层叠性的特点的, 这个在建议中也有描述。
其次咱可以假设它具备权重, 那样的话它就不会有层叠行的效果
a. 先写一个p标签选择器, 样式和之前的一样
p {
color: blue;
} b. 之后在它的后面写一个* p选择器
* p {
color: yellowgreen;
} 查看效果是文字的颜色是yellowgreen。
c. 接下来把* p选择器的代码放在p选择器之上， 再运行
这时候会发现字体颜色由原来的yellowgreen变为了blue。这就说明它并没有体现优先级, 而是体现出了层叠性的效果, 所以说通配符在权重叠加计算中没有任何权重
• 示例代码:
以下是我的实例代码, 请参考
这是一个段落
• 备注:
头回写博客,如有写的不好或是有问题, 还请多多指教多多担待, 如有问题或是建议, 欢迎评论区里留言
评论(0)