我注意到 SO 上已经有一些类似的问题和答案，但让我首先在这里澄清我的具体问题：
我有讲座幻灯片，其内容如下：
http://mindinscription.net/webapp/csstest/precedence.PNG
说实话，我没听说过css的这个规则我自己优先，我用谷歌搜索找到了类似主题但不太一样的东西： 这里
为了自己进行测试，我在自己的服务器上制作了一个测试页面这里< /a>
在 FireFox 3.6.3 上运行它后，我确信它没有按照讲座幻灯片中的陈述显示应有的方式：
- 导入的样式表？我做错了吗？我无法使用 FireBug 看到它的效果，
- 它说嵌入的样式表比链接/导入的样式表具有更高的优先级，但是，如果我将链接/导入的标签放在后面，它就不起作用。
- 内联样式 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 is on client -side（服务器端 JavaScript 怎么样？）和“嵌入样式位于网页的头部
“（到底是什么？我不允许把它放在 body 标签内？）
抱歉这个愚蠢的问题，明天考试，我现在看到很多事情需要思考:)
I've noticed that there are a couple of similar questions and answers at SO already, but let me clarify my specific question here first:
I've got lecture slides which states like this:
http://mindinscription.net/webapp/csstest/precedence.PNG
To be frank, I haven't heard of this rule of css precedence myself, and I googled to find something with similar topic but not quite like that : here
To have a test myself, I've made a test page on my own server here
After running it on FireFox 3.6.3, I am sure it does not show the way as it should be, according to the statement in lecture slides:
- imported stylesheet ? am I doing it wrong? I cannot see its effect using FireBug
- it says that embedded stylesheet has a higher precedence over linked/imported stylesheets, however, it doesn't work, if I put the linked/imported tag AFTER that.
- inline style vs html attributes ? I've got an image where I firstly set its inline style to control the width and height, then use direct html attributes width/height to try modifying that, but failed...
Below is the source code :
<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>
Can any experienced CSS guys help me figure out if the slide is correct or not?
Frankly speaking, I am puzzled myself, as I can clearly see some other "incorrect" statements here and there amongst the slides, such as JavaScript is on client-side (how about server-side JavaScript?) and "Embedded styles are in the head section of a web page
"(what the heck? I am not allowed to put it inside the body tag?)
Sorry about this silly question, the exam is on TOMORROW, and I now see a lot of things to think about :)
发布评论
评论（2）
首先，对于导入的样式表，它们意味着使用
@import 嵌入的样式表规则。其次，CSS 2.1 规范中该解释下面的几行有一个对 的解释级联顺序。 规范的其他部分可能对您的考试也有用。祝你好运。
更新：谷歌搜索结果位于：
等
First, with imported stylesheets they mean stylesheets embedded using the
@importrule.Second, a few lines below that explanation in the CSS 2.1 spec there's an explanation of the cascading order. Other parts of the spec might be useful for your exam, too. Good luck.
Update: A bit of googling resulted in:
etc.
的属性由linked.css中的选择器重新分配。imported.css没有带有id="div"的元素。<style></style>are being reassigned by the selector inlinked.css.id="div"forimported.css.