Question

我的印象是，html文档中<link href="css">标记的顺序与css引擎的选择器特异性无关，或者您不应该依赖它。多年来，我在课堂上开设了一个课程来应用一个主题＆＃34;我可以通过做一个上下文选择器来增加特异性，例如

body.theme h2 { color:red }

我是否可以完全依赖@import或在头部订购以建立明确的特异性命令？

Answer 1

我们假设您有两个CSS文件：

名为BlueTheme.css的文件：

a  {
  color:Blue;
}

名为RedTheme.css的文件：

a  {
  color:Red;
}

注意：上述两个类具有相同的特异性。

现在，让我们说你有一个HTML文件：

<link rel="stylesheet" type="text/css" href="BlueTheme.css">
<link rel="stylesheet" type="text/css" href="RedTheme.css">

<a href="#">Some link here</a>
<a href="#">Some other link here</a>

这里的结果是你的两个超链接都是红色的。

如果您要进行以下更改：

<link rel="stylesheet" type="text/css" href="RedTheme.css">
<link rel="stylesheet" type="text/css" href="BlueTheme.css">

HTML文件中的

（重新排序标签），

那么结果就是你的两个超链接都是蓝色的。

我希望您了解一个场景的要点，其中链接标记的顺序可能会影响呈现的HTML样式。：）

<link />标记或@import标记对CSS选择器特异性的影响顺序是什么？

1 个答案: