CSS规则优先级

Question

鉴于以下加价......

<div id="Header">
     <a href="#" class="Highlight">foo</a>
</div>

以下样式表......

/******************Exceptions******************/
#Footer, #Header,
#Footer a, #Header a { color: #f8f8f8; }


/******************Classes******************/
.Highlight, a.Highlight { color: #B1D355; }
.Notification, a.Notification { color: Red; }

为什么我的链接仍然是灰白色(F8F8F8)而不是绿色(B1D355)？

不应该使用类Highlight重写Header和Footer的颜色设置,因为它是在声明后出现的吗？

Answer 1

一切都与体重有关.一个类选择器被一个ID选择器打败.

#Footer a

将始终优先于

.Highlight 要么 .Highlight a

做你的选择器

#Footer .highlight a

你应该没事

Answer 2

CSS优先级

1. ID选择器>类选择器>属性选择器

2. 对于相同的优先级,后者具有更高的优先级.

   .class1 {color:black; }

   .class2 {color:red; }

   它会是红色的.

3. 要获得更多优先权,请使用 !important

对于您的问题,#FooterID选择器的优先级高于.Highlight类选择器.