3

为什么下面的文字使文字变红？

#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 中更进一步，它是否具有更多的支配地位？！

4

5 回答 5

7

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.

于 2009-02-05T04:39:04.663 回答
5

根据http://htmldog.com/guides/cssadvanced/specificity/，'#'（一个 id 选择器）具有最高的特异性，所以是的，任何带有 '#' 的东西都会在任何没有的东西之前，如果他们提到对同一件事。

检查该链接以获取更多信息。

于 2009-02-05T04:08:14.587 回答
1

基本：

只要您使用相同的选择器，这是真的：

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

但还有更多的优先规则

如果你只使用链接样式表或在 head 中定义样式，这是真的：

优先级 1：ID（因为只能有一个）
优先级 2：.classes（因为必须添加 .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 上的浏览​​器支持；

于 2009-02-05T04:35:14.687 回答
0

这似乎是它的工作方式（有时令人沮丧），id 选择器比类更具体。

于 2009-02-05T04:11:25.063 回答
0

选择器的工作基于规则的具体程度。一个 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 列表？

于 2009-02-05T04:23:42.293 回答