为什么这个CSS ID和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，边框也会失败。我知道边框不会在继承中传递，但继承正在从. if子指示符移到#superfish-3 .if子指示器，所以我假设我的红色箭头会显示，但不显示。这与添加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; 
}

如果你不介意的话。