Tada

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前端杂谈: CSS 权重 (Specificity) css 权重 想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短的 css selector id selector 权重高于 class selector. 但是 具体规范 是什么? 浏览器是按照什么标准来判定不同选择器的权重的呢? 让我们来看一下 官方文档 是怎么说的~ 第一个关键词: Specificity Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors 官方文档中用 Specificity: 特异性 来表示一个 css selector 和其元素的相关性. 相关性越强, 即表示表示其权重最高. 那么问题来了, Specificity 是如何被比较的呢?

第一个问题: 什么是 attribute & 什么是 property ? attribute 是我们在 html 代码中经常看到的键值对, 例如: <input id="the-input" type="text" value="Name:" /> 上面代码中的 input 节点有三个 attribute: id : the-input type : text value : Name: property 是 attribute 对应的 DOM 节点的 对象属性 (Object field), 例如: HTMLInputElement.id === 'the-input' HTMLInputElement.type === 'text' HTMLInputElement.value === 'Name:' 第二个问题: 从上面的例子来看, 似乎 attribute 和 property 是相同的, 那么他们有什么区别呢? 让我们来看另一段代码: <input id="the-input" type="typo" value="Name:" /> // 在页面加载后, 我们在这个input中输入 "Jack" 注意这段代码中的 type 属性, 我们给的值是 typo , 这并不属于 input 支持的 type 种类. 让我们来看看上面这个 input 节点的 attribute