HTML-CSS链接顺序
[英]HTML - CSS Link Order
问题描述
I came across css link orders in a html file from CodeCademy. 
我在CodeCademy的html文件中遇到了CSS链接命令。 I just can't get the logic of linking css files. 我只是无法获得链接CSS文件的逻辑。 Why do we have to link the files according to this order below? 为什么我们必须按照下面的顺序链接文件？ Is it somehow related to programming where we must first define the header file which contains the functions before using them? 它与编程有关吗？在编程之前，我们必须首先定义包含函数的头文件？ Is that logic applicable at linking a CSS file too? 该逻辑是否也适用于链接CSS文件？ Could someone please provide a comprehensive explanation for this question? 有人可以为这个问题提供全面的解释吗？ :D ：D
<head> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css"> <link rel="stylesheet" href="main.css"> </head>
Does the order of attributes matter inside the link element? 属性的顺序在link元素内部是否重要？ For example <link href="" rel=""> and <link rel="" href=""> , what's the effect of having href as precedence compared to rel? 例如<link href="" rel=""> and <link rel="" href=""> ，与rel相比，使用href作为优先级有什么作用？
3 个解决方案
解决方案1
3 2014-10-28 15:08:43
From the CSS spec : 从CSS规范 ：
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
Order matters, because, when rules conflict, order is a factor in deciding which one wins. 顺序很重要，因为当规则冲突时，顺序是决定哪个人获胜的因素。
解决方案2
3 2014-10-28 15:09:12
Later rules override earlier rules (if they're equally specific). 较新的规则会覆盖较早的规则（如果它们同样相同）。 For example, if one CSS file does: 例如，如果一个CSS文件包含以下内容：
a { color: red; }
and a later one does: 后来一个做了：
a { color: black; }
your links will be black. 您的链接将为黑色。
As a result, typically, you'd include the various frameworks you're using first, with your applications's CSS as the last file. 因此，通常情况下，您将包括您首先使用的各种框架，而应用程序的CSS作为最后一个文件。 This allows you to override their styles as desired. 这使您可以根据需要覆盖其样式。
解决方案3
2 2014-10-28 15:09:30
Due to the cascade nature of a stylesheet, the latter styling overwrite the earlier styling. 由于样式表的级联性质，后一种样式将覆盖较早的样式。
For example, if there are two selectors with different height , the latter specified one wins. 例如，如果有两个选择器的height不同，则后者指定一个获胜者。
Lets say we have: 可以说我们有：
#div {
height:50px;
}
#div {
height:100px;
}
The height of the #div will be 100px not 50px because 100px is declared later. #div的高度将为100px而不是50px因为稍后会声明100px 。 Therefore, it over-writes 50px . 因此，它将覆盖50px 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.