CSS优先顺序？我的演讲幻灯片是否正确？答案

【问题标题】：CSS precedence order? My lecture slides are correct or not?CSS优先顺序？我的演讲幻灯片是否正确？
【发布时间】：2011-03-05 06:16:52
【问题描述】：

我注意到 SO 已经有几个类似的问题和答案，但让我先在这里澄清我的具体问题：

我有这样的演讲幻灯片：

http://mindinscription.net/webapp/csstest/precedence.PNG

坦率地说，我自己并没有听说过这个 css 优先规则，我用谷歌搜索了一些类似主题但不太像的东西：here

为了自己测试，我在自己的服务器上做了一个测试页面here

在 FireFox 3.6.3 上运行它后，根据讲座幻灯片中的声明，我确信它并没有显示出应有的方式：

导入的样式表？我做错了吗？我用 FireBug 看不到它的效果
它说嵌入式样式表比链接/导入的样式表具有更高的优先级，但是，如果我将链接/导入的标签放在后面，它就不起作用了。
内联样式与 html 属性？我有一个图像，我首先设置它的内联样式来控制宽度和高度，然后使用直接 html 属性宽度/高度来尝试修改它，但是失败了......

以下是源代码：

<html>
<head>
    <style type="text/css">
        #target
        {
            border : 2px solid green;
            color  : green;
        }
    </style>
    <link rel="stylesheet" href="./linked.css" type="text/css" media="screen" />
</head>
<body>
    <div id="target">A targeted div tag on page.</div>

    <img src="cat.jpg" alt="" style="width : 102px; height : 110px;" width="204px" height="220px" />
</body>
</html>

任何有经验的 CSS 人可以帮我确定幻灯片是否正确吗？

坦率地说，我自己也很困惑，因为我可以在幻灯片中清楚地看到一些其他“不正确”的陈述，例如 JavaScript 在客户端（服务器端 JavaScript 怎么样？）和“嵌入式样式”位于网页的头部 "（什么鬼？我不能把它放在body标签里？）

对不起这个愚蠢的问题，明天就要考试了，我现在看到很多事情要考虑:)

【问题讨论】：

@Nick Yuck，你不想碰那张幻灯片……你的意思是：amok？ </spellcheck> ;)
这是一张 933 KB 的 JPEG 图片，只有黄色背景上的黑色文本？你绝对应该使用PNG！
您的幻灯片肯定需要调整，确定背景颜色的 CSS 样式已经模拟*，拼写仍然让我难以理解 :(
@Marcel Korpel : 谢谢你，我只是用 MS Paint 来获取图片，但忘记将其更改为 PNG :)

标签： html css operator-precedence

【解决方案1】：

<style></style> 的属性正在由 linked.css 中的选择器重新分配。
对于imported.css，没有带有id="div" 的元素。

【讨论】：

对不起，我的错误。但我很高兴看到它不会改变页面的最终外观。是的，我认为“优先级”实际上是“最新”适用的那个。但是...幻灯片中没有:(

【解决方案2】：

首先，对于导入的样式表，它们是指使用 the @import rule 嵌入的样式表。

其次，在 CSS 2.1 规范中的解释下方几行有对 cascading order 的解释。 the spec 的其他部分也可能对您的考试有用。祝你好运。

更新：googling 导致：

等等

【讨论】：

感谢您的链接，绝对有帮助。
我总是忘记在关键字之间加上 + :( 感谢您的链接，现在我可以知道为什么幻灯片会对我产生如此奇怪的陈述了 :) 我希望在考试中它不会得到这个棘手的话题太多了。
@Michael：+？你的意思是在进行谷歌搜索时？您可以在搜索字段中输入空格。