Почему мой встроенный стиль не имеет приоритета над стилями в моей внешней таблице стилей?

Question

У меня есть следующая таблица стилей:

/* MyStylesheet.css */
.MyForm .MyInput fieldset { border: 2px solid grey }

А затем следующий HTML-код:

<div class="MyForm">
 <div class="MyInput">
  <fieldset>
   <style type="text/css">
    .MyInnerFieldsets fieldset { border: 0 }
   </style>
   <div class="MyInnerFieldsets">
    <fieldset>
    </fieldset>
    <fieldset>
    </fieldset>
   </div>
  </fieldset>
 </div>
</div>

Все наборы полей получают сплошную серую рамку размером 2 пикселя из внешней таблицы стилей.Я думал, что вложенные наборы полей получат границу 0 от встроенного стиля, так как селектор ".MyInnerFieldSets fieldset" имеет приоритет над ".MyForm .MyInput fieldset".Я проверял это в Firefox 3.6.8.Это ожидаемое поведение или проблема Firefox?

Спасибо

Answer 1

Селектор

.MyForm .MyInput fieldset 

имеет большую специфичность (более конкретно), чем селектор

.MyInnerFieldsets fieldset

Более конкретный селектор отменяет менее специфичный. Читайте о специфичности и как она рассчитывается здесь.

Чтобы решить эту проблему, сделайте свой второй селектор более конкретным (например, .MyInput .MyInnerFields fieldset) или сделайте первый селектор менее конкретным (.MyInput fieldset).

Answer 2

.MyForm .MyInput fieldset { border: 2px solid grey }

В этом правиле указаны 2 класса, поэтому оно более конкретное, чем последнее правило.Просто сделайте последнее правило конкретным или более конкретным, добавив к нему то же имя класса.