css - 在这个例子中理解 css 重要的关键字

Question

在我的 html 中我有

<div id="mainNewsBody" class="news">
    <a class="readMore" href="/News/Details/1">read more ...</a>
</div>

我试图设计风格阅读更多......用这个css狙击手

#mainNewsBody .news .readMore a{
    color: #7F0609;
}

要实际应用这种样式，我必须!important在颜色属性中使用关键字。我知道这个 !important 关键字强制使用该属性，但我不明白为什么会出现这种情况，因为我明确告诉将特定 id 与特定类元素以及该元素内部匹配到 mach 链接。

有人可以启发我。

谢谢

score 3 · Accepted Answer

试试这个：

.news .readMore {
    color: #7F0609;
}

无需为同一元素调用 id 和类名。

score 2 · Accepted Answer

它a.readMore不是.readMore a（第一种情况是搜索具有类的元素.readMore并将 CSS 附加到任何子a元素）

并且#mainNewsBody .news应该是#mainNewsBody.news（您应该“连接” id 和 class，因为它们引用相同的元素）

共制作#mainNewsBody.news a.readMore

编辑

我看到很多关于将你的 CSS 简化为类的注释。这实际上取决于您要完成的工作。如果您正在处理一个巨大的 CSS 文件，我建议您尽可能严格地指定。这是为了防止将任何 CSS 应用到您不想要的地方。

a { }例如会弄乱你所有的链接，a.news { }只会弄乱a class='news'

score 1 · Accepted Answer

困扰您的是特异性，您的选择器中的元素类 ID 越多，您的选择器就越具体。

所以例如

.class a {

}

比仅仅更具体

a {

}

只要确保您没有更具体的选择器，如果您需要使当前的选择器更具体或使用!important您所说的声明。

在上面的片段中这是不正确的

#mainNewsBody .news .readMore a

它将在一个元素中搜索一个具有类news的元素，该元素的 idmainNewsBody在您的情况下不正确，因此请使用此

#mainNewsBody a.readMore { 
/* This will be more specific than the below one 
   as you are using id here and not class */
    color: #7F0609;
}

或使用

.news a.readMore {
    color: #7F0609;
}

score 1 · Accepted Answer

Ozan 是对的，如果不是绝对必要，请从 CSS 中删除“mainNewsBody”ID。

.news .readMore a{
color: #7F0609;}

如果您想非常具体并且需要在 CSS 选择器中包含 ID，请删除“.news”前面的空格

#mainNewsBody.news .readMore a{
color: #7F0609;}

score 0 · Accepted Answer

标记为 !important 的 CSS 规则优先于后面的规则。!important 确保此规则具有优先权。

score 0 · Accepted Answer

可能您的代码正在为元素生成内联 css ，或者您在其他地方对带有关键字a的元素有另一个不太具体的定义。a!important

内联样式的优先级高于在元素外部定义的样式。要通过不太具体的定义来克服内联样式或带!important关键字的样式，您需要通过关键字!important和更具体的定义来定义它。

6 回答 6