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

Question

在我的HTML中我有

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

我试着用这个css

来阅读更多... snipper

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

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

有人可以引诱我。

由于

Answer 1

试试这个：

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

无需为同一元素调用id和class name。

Answer 2

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

和#mainNewsBody .news应为#mainNewsBody.news（您应该＆＃39;连接＆＃39; id和类，因为它们引用相同的元素）

总计#mainNewsBody.news a.readMore

Fiddle

修改

我看到很多关于将css简化为类的注释。这实际上取决于你想要完成的事情。如果你正在使用庞大的CSS文件，我建议尽可能严格地指定。这样可以防止在您不想要的地方应用任何CSS。

例如，

a { }会弄乱您的所有链接，a.news { }只会混淆a class='news'

Answer 3

这会让你感到困扰的特殊性，你的选择器中的元素ID越多，你的选择器就越具体。

所以例如

.class a {

}

更具体而不仅仅是

a {

}

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

在上面的代码段中，这是不正确的

#mainNewsBody .news .readMore a

它将在一个id为news的元素中搜索一个具有类mainNewsBody的元素，这在你的情况下是不正确的，所以要么使用这个

#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;
}

Answer 4

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

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

如果你想真正具体，需要在CSS选择器中包含ID，请从“.news”前面删除空格

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

CSS Tricks - Multiple Class ID Selectors

Answer 5

标记的CSS规则！important优先于后来的规则。 ！important确保此规则具有优先权。

Answer 6

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

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