应用CSS样式的顺序是什么？ [英] In which order are CSS styles applied?

问题描述

我有以下HTML。

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

在我的CSS样式表中，我有一个标签的一般设置，以及几个hundered行后面的设置ul李一
像这样：

In my CSS stylesheet I have general settings for the a tag, and several hundered lines later settings for ul li a. Like this:

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

Firebug告诉我，首先颜色：蓝色被加载，然后覆盖通过颜色：红色

到目前为止，我一直认为，加载css文件的顺序和单个css文件中的样式顺序告诉浏览器html元素应该如何格式化。不幸的是我现在经历的是反之亦然。

Firebug tells me, that first the color:blue is loaded, and afterwards overriden by color:red
So far I've always thought, that the order of loading css files and the order of style inside a single css file tell the browser how html elements should be formatted. Unfortunately I'm now experiencing it vice versa.

所以告诉我，如何纠正我的风格，以实现在li里面的标签呈现蓝色，而不是红色？

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

推荐答案

样式是根据样式最常见的特定应用于元素，具有相等特异性的规则的文本顺序。更多此处规范。由于 a：link 比 ul li a 更多特定

Styles are applied according to which styles are most specific to the element, and then in textual order for rules that have equal specificity. More here in the spec. Because a:link is more specific than ul li a, that style wins regardless of placement.

那么告诉我，如何纠正我的风格，以实现li里面的一个标签呈现蓝色而不是红色？

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 来实现：

Make the blue rule at least as specific as the red rule. In this case, you can do that by adding :link to it:

ul li a:link
{
  color:blue;
}

这篇关于应用CSS样式的顺序是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！