Question

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

我有演讲幻灯片，如下所示：

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

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

为了自己进行测试，我在自己的服务器here

上创建了一个测试页面

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

导入样式表？我做错了吗？我无法使用FireBug看到它的效果
它表示嵌入式样式表比链接/导入样式表具有更高的优先级，但是，如果我将链接/导入的标记放在AFTER之后，它就不起作用。
内联样式vs 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怎么样？）和“嵌入式样式”位于网页的头部 “（到底是什么？我不允许把它放在身体标签内？）

对于这个愚蠢的问题感到抱歉，考试是明天的，我现在看到很多要考虑的事情：）

Answer 1

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

Answer 2

首先，使用导入的样式表，它们意味着使用the @import rule嵌入样式表。

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

更新：一点googling导致：

等

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

2 个答案: