CSS样式的层叠顺序

Question

CSS样式的层叠顺序

3

<!DOCTYPE html>
<html>
<head>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

你好，我有一个关于为什么<style>会覆盖 <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">的问题。对于顺序，是内联元素比文档级别的元素具有更高的顺序吗？

- Chowsy

3个回答

1

HTML属性“width”和“height”早于CSS出现，且不够灵活，因此CSS的创建者需要决定如果文档包含这些旧属性和影响相同元素的新CSS规则，则会发生什么。

简单来说，他们决定CSS规则通常应优先考虑，允许这些属性成为旧浏览器的后备，这些浏览器根本不处理CSS。

为了更正式的回答，我们可以查阅当前规范，定义CSS规则的级联和优先级: CSS层叠和继承第3级, 其中包括6.4节：非CSS展示提示的优先级：

用户代理（UA）可以选择遵守源文档标记中的展示提示，例如[HTML]中的bgcolor属性或s元素。所有基于文档语言的样式必须被翻译成相应的CSS规则，并作为UA-origin规则进入级联，或者被视为具有零特异度的作者-origin规则放置在作者样式表的开头。

术语“UA-origin规则”和“作者-origin规则”在文档的其他地方有定义；您<style>标签中的规则将是“作者-origin规则”，而“UA-origin规则”内置于浏览器中（在规范的行话中称为“用户代理”），并且始终具有较低的优先级。

术语“特异性”实际上在单独的规范中定义，但简而言之，像img.some-class {}这样的规则比像img {}这样的规则具有更高的特异性。

因此，将所有内容综合起来，您的width和height属性被定义为以下之一：

等同于“UA-origin规则”，其优先级始终低于在<style>标签中定义的规则。
等同于“作者-origin”规则，如您<style>标签中的规则，但具有最低的特异性。这意味着除了其他最小特异性规则（例如* { width：100％; } ）之外，它们将被任何其他匹配规则覆盖。

- IMSoP

-3

内联宽度和高度与样式无关，更像是属性相关的。为了避免混淆调试和冲突，决定采用更集中和更好管理的系统 - CSS。为什么？因为它更相关于开发人员的模型-视图-控制器概念，尽管关系不直接，但基本上鼓励您通过CSS更好地管理和集中管理站点的样式，而不是使用内联属性。

- Undry

这并没有真正回答问题，问题是关于为什么将这些属性与较新的CSS规则组合在一起会产生特定的行为。 - IMSoP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

请参见CSS2规范：

UA可以选择遵守HTML源文档中的表示属性。如果这样做，这些属性将被转换为相应的CSS规则，其特异性等于0，并被视为插入到作者样式表的开头。因此，它们可能会被后续的样式表规则覆盖。在过渡阶段，这一政策将使得样式属性更容易与样式表共存。