CSS优先级-权重叠加计算

2023-01-08 21:47 由诸葛青发表于 #前端开发

• 先上总结: 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。这就说明它并没有体现优先级, 而是体现出了层叠性的效果, 所以说通配符在权重叠加计算中没有任何权重 • 示例代码: 以下是我的实例代码, 请参考 Document

这是一个段落

• 备注: 头回写博客,如有写的不好或是有问题, 还请多多指教多多担待, 如有问题或是建议, 欢迎评论区里留言