为什么这个CSS ID和Class风格不会单独取代Class风格？

Question

以下是超级鱼菜单的典型Drupal级联（注意第一行中的ID和最后一行中的类）：

<ul id="superfish-3" class="menu sf-menu sf-menu-materials sf-vertical sf-style-MatMenu2 sf-total-items-23 sf-parent-items-22 sf-single-items-1 superfish-processed sf-js-enabled sf-shadow">
  <li id="menu-899-3" class="first odd sf-item-1 sf-depth-1 sf-no-children">
    <li id="menu-900-3" class="middle even sf-item-2 sf-depth-1 sf-total-children-8 sf-parent-children-0 sf-single-children-8 menuparent">
     <a class="sf-depth-1 menuparent sf-with-ul" title="FRUIT" href="/specs/03">
       FRUIT
         <span class="sf-sub-indicator"> »</span>
     </a>

在css中定义了默认菜单箭头图像：

.sf-sub-indicator {
 background-image: url('../images/arrows-black.png'); 
}

我想将文件从黑色箭头更改为红色箭头，并创建了相应的.png文件。它的CSS是：

#superfish-3 .sf-sub-indicator {
 background-image: url('../images/arrows-red.png'); 
}

当我显示页面时，箭头不会改变，并且firebug告诉我使用了原始样式。我认为ID分数高于一个级别。如何表达选择器以取代通用的黑色选择器？

新增内容： 我有几个其他样式功能，如边框，如果我添加ID也会失败。我知道边界不会在继承中传递，但是继承从.sf-sub-indicator移动到＃superfish-3 .sf-sub-indicator，所以我会假设我的红色箭头会显示，但是'don'吨。这与添加ID特别相关，但仅适用于某些样式设置。例如，我的链接颜色为绿色，我将此ID更改为红色。这很好。

增加更多： 我在<li>级创建了一个类，它可以工作。在ID和链接（？）之间有关于类的ID或其他内容。

Answer 1

只需向上一层：

a .sf-sub-indicator {...

Answer 2

不要猜测它。任何浏览器的开发工具都能告诉您哪些样式有效以及哪些样式被覆盖。 IE的“跟踪样式”选项卡对此任务特别有用：

选择有问题的元素并展开相应的CSS属性。您将看到定义该样式的每个匹配选择器。然后，使你的选择器比最强的选择器更强。

Answer 3

是的html / css看起来很健康。奇怪的。 好吧，你可以随时做：

#superfish-3 .sf-sub-indicator {
    background-image: url('../images/arrows-red.png') !important; 
}

如果你不介意一点hackery。