代码之家 › 专栏 › 技术社区 › citronas

CSS样式的应用顺序是什么?

css html

citronas · 技术社区 · 14 年前

我有以下HTML。

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

在我的CSS样式表中,我对a标记进行了常规设置,之后对ul li a进行了几行设置。这样地:

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

Firebug告诉我,首先加载颜色:蓝色,然后覆盖颜色:红色。
到目前为止,我一直认为,加载CSS文件的顺序和单个CSS文件中的样式顺序告诉浏览器应该如何格式化HTML元素。不幸的是,我现在正经历着,反之亦然。

那么告诉我,我应该如何纠正我的风格,以实现李内的A标签被渲染为蓝色而不是红色?

3 回复 | 直到 10 年前

T.J. Crowder 10 年前

根据最常用的样式应用样式 具体的 对元素,然后按文本顺序对具有相同特异性的规则进行排序。这里更多 in the spec . 因为 a:link 是更多 具体的 比 ul li a 无论位置如何,这种风格都会获胜。

那么告诉我,我应该如何纠正我的风格,以实现李内的A标签被渲染为蓝色而不是红色?

使蓝色规则至少和红色规则一样具体。在这种情况下,您可以通过添加 :link 对它:

ul li a:link
{
  color:blue;
}

Douglas 14 年前

中的部分 如何测量特异性? 给你答案:

a:link   => one tag (a) + one pseudo-class (:link) = 1 + 10    = 11 points
ul li a: => three tags (ul, li, a)                 = 1 + 1 + 1 =  3 points

所以A:链接样式获胜。

提示:只有当两个CSS选择器具有相同的特性时,顺序(在CSS文件中)才重要。

ant 14 年前

我会用 color:blue !important;

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前