Переключить свойство CSS во вложенных элементах
Есть ли способ включить и выключить свойство CSS без использования Javascript с помощью вложенных элементов.
Проблема, которую я пытаюсь решить, заключается в том, что у меня есть несколько тегов и классов, которые выделяют текст курсивом (<em>, <blockquote>, <cite>, <q>, <dfn> и некоторые другие классы), и когда один из них находится внутри другого, один из для них курсив необходимо переключать.
<blockquote>
And so the man said, <q>That's not from <cite>Catcher In The Rye</cite>, dear
fellow!</q>, can you believe that?!
</blockquote>
Должен отображаться как:
And so the man said, "That's not from Catcher In The Rye, dear fellow!", can you believe that?!
CSS, который у меня есть для этого, становится немного беспорядочным:
q, em, dfn, cite, blockquote {
font-style: italic;
}
q q, q em, q dfn, q cite,
em q, em em, em dfn, em cite,
dfn q, dfn em, dfn dfn, dfn cite,
cite q, cite em, cite dfn, cite cite,
blockquote q, blockquote em, blockquote dfn, blockquote cite {
font-style: normal;
}
... и я почти уверен, что это не сработает даже после одного уровня вложенности (как в моем примере).
Есть ли способ сделать это без необходимости перечислять каждую перестановку тегов?
Ответы 4
Я бы справился с этим с помощью сценария, который генерирует необходимые правила вложенности для каждой перестановки. Это единственный способ не сойти с ума, поддерживая его.
Я не мог сказать вам, какие браузеры (если есть) реализуют псевдокласс CSS3 :not, но если мы увидим, что он когда-нибудь поддерживается, похоже, что мы можем это сделать:
q:not(q, em, dfn, cite, blockquote),
em:not(q, em, dfn, cite, blockquote),
dfn:not(q, em, dfn, cite, blockquote),
cite:not(q, em, dfn, cite, blockquote),
blockquote:not(q, em, dfn, cite, blockquote) { font-style: italic; }
Остается только догадываться, как браузеры будут реализовывать это, когда они это сделают, поэтому он может работать не более чем на 2 уровня (как в вашем примере).
К сожалению, я не могу придумать другого решения на чистом CSS.
Вы говорите, что у вас есть всевозможные элементы, которые нужно отображать курсивом, но после того, как они вложены, им нужно разбить предыдущий курсив. Простите, что говорю, но мне действительно интересно, действительно ли нужно такое поведение.
Позвольте мне пояснить: у вас разная разметка, такая как цитата, цитата, выделение и т. д. При использовании вложенности выделение внутри цитаты действительно должно иметь другое значение, чем при использовании вне цитаты. Следовательно, правила css по умолчанию применяются ко всему, что находится ниже. И поэтому я не понимаю желания сгладить вашу значимую вложенную разметку курсивом и не курсивом, потому что она скрывает основной смысл текущего содержимого (потому что аналогичное форматирование будет применяться к разным значимым частям документа).
Я бы порекомендовал:
- Предположите, что ваша разметка существует не просто так, поэтому оставьте стиль как есть. Выделение, вложенное в цитату, всегда должно иметь стиль элементов-предков, потому что для этого вложенности есть причина, и он не должен быть скрыт для пользователя визуально.
- Просмотрите требования вашего документа и посмотрите, действительно ли вам нужно такое вложение. В противном случае общего HTML-редактора может быть недостаточно, и вам может быть лучше использовать формат xml, который проверяет определенную схему, которая в вашем случае запрещает использование определенных элементов в других. Затем используйте редактор xml, такой как Xopus или XmlSpy, для редактирования документа.
Извините, если это не прямое решение вашего вопроса, но я надеюсь, что смогу дать вам другой взгляд на проблему и, возможно, увидеть, что, возможно, проблемы вообще нет. Удачи!
Простое решение этой проблемы возможно в CSS3:
em {
font-style: toggle(italic, normal);
}
OP спрашивает, как работает LaTeX (каждый уровень
\emphпереключает курсив). Ваше предложение «оставить стиль как есть», если я хорошо понимаю, выделит весь текст курсивом. Ясно, что это не показывает разметку пользователю. Было бы неплохо, конечно, иметь способ отличить второй уровень выделения от отсутствия выделения и третий от первого, хотя я не могу придумать хороший способ сделать это, кроме вложенных кавычек“ ”.