5.9 CSS属性无效性（适用元素）

属性基本特征的“适用元素”对应CSS特征的无效性（适用性），对应层叠处理过程从计算值computed value到应用值used value这一步。适用元素表示CSS属性针对哪些元素有效，描述了CSS属性的有效性规则，或者说，描述了无效性规则。

第1种情况：CSS属性针对特定标签才有效。

示例：MDN查询list-style属性的适用元素。

适用元素： 列表项

列表项list item即li标签，本质是display:list-item。也就是说，li标签设置list-style属性有效，其它标签例如div设置list-style属性时无效。

ConceptError007错误理解：任一CSS属性都对所有标签有效。

示例代码

<body>
    <ul>
        <li style="list-style: circle;">小步教程</li>
        <li style="list-style: circle;">xiaobuteach.com</li>
    </ul>
    <div style="list-style: circle;">小步教程</div>
</body>

list-style: circle表示设置项目符号为空心圆。

运行效果

开发者工具查看list-style适用性

li前的符号通过伪元素::marker实现。开发者工具查看元素。

li内部有::marker，而div设置list-style时内部不会自动生成::marker，间接说明这条适用性规则。list-style是可继承属性，ul内部包含多个子元素li，在ul元素设置list-style属性则多个子元素li继承此属性，形成效果。ul本身并没有list-style效果。

第2种情况：CSS属性的有效性与标签无关，与其它CSS属性值有关。

示例：MDN查询left属性的适用元素。

适用元素： positioned elements

“positioned elements”表示position属性值非static的元素，MDN相关说明如下。

left的效果取决于元素的position属性：
当position设置为static时，left属性无效。

ConceptError008错误理解：一个CSS属性设置总有效，与另一个CSS属性总是无关。

两个CSS属性可能存在对立关系，一个CSS属性可能使另外一个CSS属性无效。

示例代码

<body>
    <div id="div1" style="left: 100px;">小步教程</div>
    <div id="div2">
        <span id="span1" style="position: static; left: 100px;">小步教程</span>
    </div>
    <div id="div3" style="position: absolute; left: 100px;">xiaobuteach.com</div>
</body>

设置3个元素的left坐标100px。第1个div没有设置position属性，第2个span设置position: static，第3个div设置position: absolute。

运行效果

position默认值static，所以div1与div2的写法是等价的；position: static使left设置无效。

开发者工具查看属性无效

开发者工具—“样式”面板。

left属性颜色为灰色，右侧有警告标记说明left属性设置无效。鼠标悬停警告标记上，弹出提示信息“position: static 属性可防止 left 产生影响。不妨尝试将 position 设为除 static 之外的某个值”，说明无效的原因与解决方法。

实际项目页面存在某个CSS属性无效的情况，不一定是开发错误。因为可能存在动态设置样式或响应式布局，其它属性值可能发生变化，此时该CSS属性变成有效。

第05章 CSS语法级特性

5.9 CSS属性无效性（适用元素）

CSS入门项目小步教程