CSS! Важно не работать

У меня есть следующий код, и по какой-то причине квалификатор !important не работает.

<div style="font-family : calibri; font-size: 20pt !important;">
  <ul>
    <li>
      <span style="font-size: 11px;">
        <span style="font-size: 11px;">
          Honey Glazed Applewood Smoked Spiral Ham 
        </span>
        <span style="font-size: 11px;">
          Served with Dijon Honey Mustard and Turkey Roulade
        </span>
      </span>
    </li>
  </ul>
</div>

Теги span генерируются для форматирования веб-сайта. Я добавлял тег div, чтобы изменить вывод в формате PDF вместо того, чтобы писать, казалось бы, сложную функцию поиска и замены. Поскольку этот хак для определенных областей кода, я не могу изменить лист CSS.

Любые мысли будут оценены.

Ответ 1

Дайте <div> id, а затем добавьте это правило в таблицу стилей CSS (или в тег <style>, если вы не хотите изменять таблицу стилей):

#your_div_id span {
    font-family : calibri; font-size: 20pt !important;
}

!important в CSS позволяет автору переопределять встроенные стили (поскольку они имеют более высокий приоритет, чем стиль стилей). Это автоматически не делает стиль, отмеченный !important, отменяет все остальное.

СМОТРИТЕ: Документация W3C по спецификациям CSS Selector.
Felix Demo разметки

Ответ 2

Хорошим предметом для чтения является Специфика CSS

p имеет специфику 1 (1 селектор HTML)
div p имеет спецификацию 2 (2 селектора HTML, 1 + 1)
.tree имеет специфику 10 (1 селектор класса)
div p.tree имеет специфику 12 (2 селектора HTML + селектор классов, 1 + 1 + 10)
#baobab имеет спецификацию 100 (1 идентификатор)
body #content.alternative p имеет специфичность 112 (селектор HTML + селектор id + селектор классов + селектор HTML, 1 + 100 + 10 + 1)