了解CSS选择器 [英] Understanding CSS selectors

问题描述

为什么下面的文字变成红色？

Why is it that the below makes the text red?

#stories li a {color:red}
.default li.expand a {color:green}
li.expand a {color:blue}

$ b b

---

---

<ul id="stories" class="default">
   <li>this is the end</li>
   <li class="expand">this is the end</li>

只有我把#stories放在其他文件上，文本才会改变。

Only if I put #stories on the others will the text change. Does a # have more dominance even though it's further up the css?!

推荐答案

这是一个CSS特异性的问题。 Andy Clarke的文章 CSS：Spcificity Wars 有一个很好的解释小幽默。虽然Eric Meyer在他的评论中更加清晰。

It's a matter of "CSS Specificity". Andy Clarke's article CSS: Spcificity Wars does a pretty good job explaining it with a little humor. Although Eric Meyer adds more clarity in his comment.

这篇关于了解CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！