CSS如何确定何时将一种样式应用于另一种样式?
我已经遍历了W3CSS3选择器文档几次,这帮助我了解了如何在jQuery中更好地使用CSS选择器,但是并没有真正帮助我理解何时将一个CSS规则应用于另一个CSS规则。
我有以下HTML:
<div class='item'> <a>Link 1</a> <a class='special'>Link 2</a> </div>
我有以下CSS:
.item a { text-decoration: none; color: black; font-weight: bold; font-size: 1em; } .special { text-decoration: underline; color: red; font-weight: normal; font-size: 2em; }
鉴于以上所述,链接1和链接2的样式将由.item aCSS 确定。为什么与.specialLink 2 关联的样式没有优先级?
.item a
.special
显然,我可以这样解决:
.special { text-decoration: underline !important; color: red !important; font-weight: normal !important; font-size: 1em !important; }
但是,由于缺乏了解,我觉得这是我必须要解决的问题。
它是基于IDs,classes和tags。 IDs具有最高的特异性,classes然后是tags,因此:
IDs
classes
tags
.item a == 0 1 1 0 (id) 1 (class=item) 1 (tag=a) .special == 0 1 0 #foo == 1 0 0 #foo .bar a == 1 1 1 #foo #bar == 2 0 0
:)如果是平局,则以文件中的最后一个为准。注意1 0 0节拍0 1000 1000
1 0 0
0 1000 1000
如果要.special申请,请使其更加具体:.item a.special
.item a.special