Почему этот CSS ID и стиль Class не превзойдут один только стиль Class?

Question

Вот типичный Drupal Cascade для меню суперфиши (обратите внимание на идентификатор в первой строке и класс в последней) :

<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 баллы выше, чем класс. Как мне выразить селектор, чтобы он заменил общий черный?

ДОБАВЛЕННОЕ СОДЕРЖАНИЕ: У меня есть несколько других стилевых функций, таких как границы, которые также не работают, если я добавляю идентификатор. Я знаю, что границы не передаются по наследству, но наследование перемещается от .sf-sub-Indicator к # superfish-3 .sf-sub-Indicator, поэтому я предполагаю, что мои красные стрелки будут отображаться, но т. Это конкретно связано с добавлением идентификатора, но только для определенных настроек стиля. Например, моя ссылка имеет зеленый цвет, и я изменяю его на красный для этого идентификатора. Это отлично работает.

ДОБАВЛЕНО БОЛЬШЕ: Я создал класс на уровне <li>, и он работает. Есть что-то о наличии идентификатора или что-то о классах, которые находятся между идентификатором и ссылкой (?).

Answer 1

Да, HTML / CSS выглядит звучит. странно. ну, вы всегда можете просто сделать:

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

если вы не возражаете против небольшого взлома.

Answer 2

Хватит гадать на это.Инструменты разработчика любого браузера смогут рассказать вам, какие стили действуют и какие стили переопределяются.Вкладка IE «Трассировка стилей» особенно полезна для этой задачи:

Выберите нужный элемент и разверните соответствующий атрибут CSS.Вы увидите каждый соответствующий селектор, который определяет этот стиль.Затем сделайте свой селектор сильнее, чем самый сильный селектор.

Answer 3

Просто поднимитесь на дерево на один уровень:

a .sf-sub-indicator {...