CSS级联顺序不起作用答案

【问题标题】：CSS Cascading Order not workingCSS级联顺序不起作用
【发布时间】：2013-05-11 03:39:23
【问题描述】：

多种样式将层叠为一个：

可以指定样式：

inside an HTML element
inside the head section of an HTML page
in an external CSS file

提示：甚至可以在单个 HTML 文档中引用多个外部样式表。级联顺序

当为一个 HTML 元素指定了多个样式时，将使用什么样式？

一般来说，我们可以说所有样式都会按照以下规则“级联”成一个新的“虚拟”样式表，其中第四个具有最高优先级：

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

因此，内联样式（在 HTML 元素内）具有最高优先级，这意味着它将覆盖在 head 标签内、外部样式表或浏览器中定义的样式（默认值）。参考Here。

但是这里的 css 正好相反：

<head>
<style>
.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<img class="thumbnail" src="klematis_small.jpg" width="107px" height="100px">
<img class="thumbnail" src="klematis2_small.jpg" width="107px" height="80px">

img 的宽度和高度取自内部样式表，即在 head 标签中定义的样式表

【问题讨论】：

width="107px" 不是 css。

标签： css

【解决方案1】：

img 元素中的width 和height 是HTML 属性。
您引用的参考是关于 HTML 属性样式的，例如：
```
<img style='width: 1337px; height: 42px' (...)>
```

前者的优先级较低：我相信它会被任何可能适用的 CSS 指令设置样式；它是 HTML 代码。后者具有相当高的优先级。

【讨论】：

不客气。另一个例子是在 CSS 中被宽度和高度覆盖的 textarea 的 rows 和 cols 属性。虽然在这里他们没有相同的名字，所以它不那么混乱;）

【解决方案2】：

宽度和高度的值应该是数字 width="107" 或 % width="100%" 并且属性内联样式应该是 style="width:107px"

【讨论】：

【解决方案3】：

我认为你错了。您在 img 元素中使用的是 HTML 属性，而不是内联样式。内联样式具有最高的特异性（除了任何用!important 表示的 CSS 声明获得更高的特异性），但 html 属性没有如此高的特异性，因为它们甚至不是 CSS。

【讨论】：

【解决方案4】：

html标签内的“style”属性以外的属性不是css的一部分。

CSS 级联和优先级规则非常复杂，但这里是我所采用的一般优先级，但绝不涵盖所有内容。

一般 CSS 优先级：

使用样式标签直接应用于元素的样式标签
使用元素 ID 应用样式
使用元素类或标签名称应用样式

CSS 包含或样式标记优先级：

当涉及到在页面中包含 css 时，优先级从最后到第一。如果这两种样式包含在此序列中，则主体颜色将为红色。

<style>

    body {
        background-color: blue;
    }

</style>

<style>

    body {
        background-color: red;
    }

</style>

【讨论】：