html - CSS 样式的应用顺序是什么？

Question

我有以下 HTML。

<ul>
  <li>
    <a>asdas</a>
  </li>
</ul>

在我的 CSS 样式表中，我有 a 标签的一般设置，以及 ul li a 的几百行后面的设置。 像这样:

a:link
{
 color: red;
}
...
ul li a
{
 color:blue;
}

Firebug 告诉我，首先加载 color:blue，然后被 color:red 覆盖
到目前为止，我一直认为，加载 css 文件的顺序和单个 css 文件中样式的顺序告诉浏览器应该如何格式化 html 元素。不幸的是，我现在正经历着它，反之亦然。

那么告诉我，我必须如何更正我的样式才能使 li 中的 a 标签呈现为蓝色而不是红色？

Answer 1

根据哪些样式对元素最特定应用样式，然后按文本顺序应用具有相同特异性的规则。更多信息 in the spec .因为 a:link 比 ul li a 更具体，所以无论位置如何，该样式都会获胜。

So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

使蓝色规则至少与红色规则一样具体。在这种情况下，您可以通过向其添加 :link 来实现:

ul li a:link
{
  color:blue;
}