Цвет класса заголовка sIFR не меняется

Question

У меня есть два класса h1 - один должен быть зелёным, а другой - синим. В sifr-config у меня это настроено так:

sIFR.replace(aldo, {
  selector: 'h1',
  css: '.sIFR-root { color: #b2bc35; font-size: 24px; }'
});

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root { color: #569fd3; font-size: 24px; }'
});

и в моем коде я установил h1 следующим образом:

<h1 class="blue">The Need</h1>

однако цвет не меняется. Кто-нибудь знает, как это исправить? Спасибо!

Answer 1

Из документов SIFR 3: Если вы хотите использовать общий селектор и более конкретные, убедитесь, что сначала заменен самый конкретный. т.е. "h1.foo" выше на странице, чем "h1"

Так что это просто вопрос переупорядочения элементов:

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root { color: #569fd3; font-size: 24px; }'
});

sIFR.replace(aldo, {
  selector: 'h1',
  css: '.sIFR-root { color: #b2bc35; font-size: 24px; }'
});

Answer 2

Замена h1 уже позаботится о замене h1.blue. Замена h1.blue первой позволит вам определить другой стиль.

Вы также можете обернуть текст внутри <h1> в <span class="blue">, а затем использовать .blue в качестве селектора, чтобы придать тексту синий цвет.

Answer 3

Вам не нужно использовать две функции замены, вы можете выбрать тег h1 с помощью «sIFR-root», а затем тег h1.blue. Вот так:

sIFR.replace(aldo, {
    selector: 'h1',
    css: [
      '.sIFR-root {color: #b2bc35; font-size: 24px;}', //this is the h1 tag itself
      '.blue {color: #b2bc35; font-size: 24px;}'
      ]
});

РЕДАКТИРОВАТЬ : На самом деле я не уверен, что это работает таким образом ... это работает для таких вещей, как ссылки (а), но не уверен, что это будет работать с классами.

Answer 4

Попробуй так:

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root' { 'color': '#569fd3', 'font-size': '24px' }
});