Question

如果我在CSS类和元素内部直接定义CSS属性，最终会使用哪个值？

让我们以宽度为例

<html>
<head>
 <style type="text/css">
  .a {
   width: 100px;
  }
 </style>
</head>
<body>
 <div class="a" style="width: 200px;"> </div>
</body>
</html>

div的宽度应该在浏览器中是什么？（根据标准，而不是实践中发生的事情）

Answer 1

Cascading（因此它的名字）表示它是元素的首选项而不是引用文件样式的文件内样式。

Answer 2

“style”属性将胜过类选择器。

查看walkthrough of how conflicting rules are resolved的实用指南。另请参阅CSS2 specification section on specificity

Answer 3

元素的样式将被使用，因为它具有更高的特异性。

特异性规则：

元素style：1000分
id：100分
上课：10分
元素名称（表格，div等）：1分

示例：

.class是10分
table.class是11分
div#myId.class是111分
div是1分

将使用分数最多的声明。但是，您可以使用!important覆盖任何级别的样式。

Answer 4

它应该是200px。定义的规则here表示如果“如果声明是来自'样式'属性而不是带有选择器的规则”那么这是最高优先级/特异性。

Answer 5

元素的定义值应该占上风......

Answer 6

关于这个问题，你可以看看规范;特别是6.4.3 Calculating a selector's specificity部分。第6.4.1 Cascading order部分也可能有用。

“style”属性是最后一个要声明的属性，也是最具体的属性;所以这是应该使用的那个。

CSS属性冲突，应该赢？

6 个答案: