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）？

不应该使用标题类覆盖标题和页脚的颜色设置，因为它是在声明之后出现的吗？

Answer 1

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

#Footer a

总是优先于

.Highlight或.Highlight a

制作选择器

#Footer .highlight a

你应该没事。

Answer 2

CSS优先级

1. ID选择器＆gt;类选择器＆gt;属性选择器

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

     

   .class1 {      颜色：黑色;   }

        

   .class2 {      红色;   }

   它会变红。

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

---

对于您的问题，#Footer是ID选择器的优先级高于.Highlight，类选择器。

Answer 3

ID在CSS中的优先级高于类：

使用#Header a.Highlight { color: #B1D355; }

Answer 4

CSS规则不仅仅基于“最后解析，最后应用”而应用。它还取决于规则对该元素的具体和独特性。由于您只指定了class选择器，因此包含id的路径获得的优先级更高。