理解CSS选择器

Question

为什么下面的代码使文本变成红色？

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

---

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

只有当我在其他地方加上 #stories，文本才会改变。即使它在css中更靠前，#是否具有更高的优先级？！

- Daniel

Answer 1

这是一个关于"CSS特异性"的问题。安迪·克拉克(Andy Clarke)在他的文章《CSS: 特异性之战》中通过一些幽默的方式做了很好的解释。虽然埃里克·迈耶(Eric Meyer)在他的评论中提供了更多的明确解释。

- Andy Ford

Answer 2

根据http://htmldog.com/guides/cssadvanced/specificity/，'#'（id选择器）具有最高的特殊性，因此，如果它们引用相同的内容，则带有'#'的任何内容将优先于不带'#'的任何内容。请查看该链接获取更多信息。

- sykora

---

你的回答和我选择的那个一样好，但是我觉得星球大战的解释可能会帮助人们在将来更好地理解它。我+1了你的回答以尝试补偿 :) - Daniel

Answer 3

基础知识：

只要使用相同的选择器，以下规则适用：

内联样式具有优先级1 在head中定义的样式具有优先级2 链接样式表中的样式具有优先级3

但还有更高的优先级规则

如果您只使用链接的样式表或在head中定义样式，则以下规则适用：

优先级1：ID（因为只能有一个）
优先级2：.class（因为必须添加.class）
优先级3：标签（优先级最低，因为没有附加.class或ID）

ID越接近body，优先级越高。

<div id="first-id">
  <div id="second-id">
    <div class="someclass">

    </div>
  </div>
</div>


#first-id .someclass {}

节拍

.someclass {}

以及

#second-id .someclass {}

但是

您可以通过使用以下方法使 .someclass 超越 ID：

.someclass { color:#f00 !important;}

但我不确定!important在浏览器上的支持情况;

- olemarius

Answer 4

看起来就是这样运作的（有时候令人沮丧），id选择器比class选择器更加具体。

- Andrew

Answer 5

选择器的工作原理基于规则的特定程度。ID可以唯一标识一个特定的元素，因此它是最具体的选择器。

以这个例子为例：

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

如果选择器不能按照这种方式工作，你会如何只针对 #stories 列表进行定位？

- jacobangel