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

在我的HTML我有理解CSS重要的关键字在这个例子中

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

我试过的风格读更多...剪断这个CSS

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

实际应用这种风格我有在颜色属性中使用!important关键字。我知道这个！重要的关键字强制使用该属性，但我不明白为什么这里是这种情况，因为我明确告诉用特定的id与特定的class元素匹配，并在该元素内匹配mach连接。

有人可以引导我。

谢谢

来源

2013-05-03 user1765862

阅读上删除空格[CSS选择器]（https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors），你会明白你出错的地方。您提到的风格和结构与您所描述的情况不符。 – 2013-05-03 06:47:04

这是a.readMore代替.readMore a（第一种情况下将搜索元素与.readMore类和CSS附加到任何孩子a -elements）

和#mainNewsBody .news应该是#mainNewsBody.news（你应该“连击”的ID和类，因为它们是指相同的元件）

即总共#mainNewsBody.news a.readMore

Fiddle

编辑

我看到简化你的CSS只是班许多笔记。这真的取决于你想要完成的事情。如果你正在处理一个巨大的CSS文件，我建议尽可能严格地指定。这可以防止任何CSS被应用到你不想要的地方。

a { }例如会乱用所有的链接，a.news { }将只与a class='news'

来源

2013-05-03 06:46:12 Aquillo

CSS规则标记！重要优先于后面的规则。重要的是确保这个规则优先。

来源

2013-05-03 06:45:01

乱试试这个：

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

没有必要呼吁ID和类名相同的元素。

来源

2013-05-03 06:46:26 sylwia

它会困扰你的特殊性，你选择器中的元素类id越多，选择器就越具体。

因此，例如

.class a { 

}

不仅仅是

a { 

}

更具体的只是看到它，你没有更具体的选择，如果你比你需要做当前一个更具体的或使用!important声明如你所述。

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

#mainNewsBody .news .readMore a

它将搜索具有ID 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类元素

或者使用

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

来源

2013-05-03 06:47:53

你最后一个例子会在'.readMore'里面搜索'a'，而在OP的例子中'.readMore'是'a' :) – Aquillo 2013-05-03 09:51:33

@Aquillo糟糕的一天，谢谢指出，将会修复它 – 2013-05-03 09:52:24

哈哈没问题！ – Aquillo 2013-05-03 09:55:52

Probabl y您的代码正在为a元素生成内嵌css，或者您还有其他关键字!important关键字a元素的另一个不太具体的定义。

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

来源

2013-05-03 06:55:45 Arbel

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

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

如果你想成为真正的具体需要包括在CSS选择器的ID从前方“新闻”的

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

CSS Tricks - Multiple Class ID Selectors

来源

2013-05-03 06:55:49 DanielV

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

回答

相关问题