HTML面试题选择器权重_html面试题CSS选择器权重计算【进阶】

CSS权重按“a,b,c,d”四位计算：内联样式为(1,0,0,0)，ID选择器每1个加b=1，类/属性/伪类每1个加c=1，元素/伪元素每1个加d=1，各部分独立计数不进位。 内联样式（属性）不是“一定赢”，而是“赢在起跑线”——但能直接抢跑，且不按规则出牌。 怎么快速算出两个选择器谁的权重高 别背四元组（a,b,c,d），直接换算成十进制数更直观：把 ID 当 100、类/伪类/属性当 10、标签当 1，内联样式固定为 1000。比如： → 1 个 ID（100） + 1 个类（10） + 1 个标签（1） + 1 个伪类（10） = 121 → 1 个 ID（100） + 3 个标签（3×1=3） + 1 个类（10） = 113 → 固定 1000 ，不管后面跟多少 或 注意：空格、 、 、 这些组合符不加分；通配符 、伪元素 也只算 1 分（不是 0）； 是伪元素，不是伪类，别误加到 c 位。 真的能无视一切吗 不能。它只作用于**单个声明**，不提升整个选择器的权重，也不影响其他属性。例如： 立即学习 “ 前端免费学习笔记（深入） ”； 结果是： 取 （因为先声明且带 ）， 取 （后声明且带 ）。关键点： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 仅对当前属性生效，不“传染”给同规则其他属性 多个 同时存在时，仍要按选择器权重 + 书写顺序判断 IE6 对 有 bug：同一规则中后写的 可能被忽略 为什么开发者工具里显示权重是 ，但我算出来是 111 这是两套计数逻辑并存：浏览器内部用四元组（a,b,c,d）做逐位比较，人眼习惯十进制加总。它们等价，但不能混用。例如： → (0,1,2,0) = 0×1000 + 1×100 + 2×10 + 0×1 = 120 → (0,1,1,2) = 0×1000 + 1×100 + 1×10 + 2×1 = 112 虽然十进制差 8，但浏览器比的是 (0,1,2,0) vs (0,1,1,2)：a 相同比 b（都是 1），b 相同比 c（2 > 1），立刻终止，不看 d。所以 那条胜出——哪怕你手动加总觉得只差一点，实际比较根本不会走到 d 位。 交集选择器和并集选择器的权重怎么算 交集（如 ）是**所有部分权重相加**；并集（如 ）是**每个选择器单独算，各自生效**，不叠加。 → 1 标签（1） + 1 类（10） + 1 ID（100） = 111 → 三条独立规则：权重分别是 1、10、100；各自匹配对应元素，互不影响 错误认知：“ 总权重是 11”——不存在这种算法，浏览器不这么处理 容易被忽略的是：交集选择器里哪怕只多一个空格，就变成后代选择器，权重结构全变。比如 是 (0,0,1,2)，而 是 (0,0,1,1)，差的那 1 分，可能就是样式生效与否的临界点。