Переключить свойство CSS во вложенных элементах

Question

Без использования Javascript, есть ли способ включить или отключить свойство CSS через вложенные элементы.

Проблема, которую я пытаюсь решить, состоит в том, что у меня есть несколько тегов и классов, которые делают текст курсивом (<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>

Должен отображаться как:

И этот человек сказал: «Это не от Над пропастью во ржи» , дорогой парень! », вы можете в это поверить?

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;
}

... и я почти уверен, что даже один уровень вложенности не сработает (как в моем примере).

Есть ли способ, которым я могу сделать это без необходимости перечислять каждую перестановку тегов?

Answer 1

Я не могу сказать вам, какие браузеры (если таковые имеются) реализуют псевдокласс 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.

Answer 2

Простое решение этого возможно в CSS3:

em {
    font-style: toggle(italic, normal);
}

Answer 3

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

Позвольте мне объяснить: у вас есть другая разметка, такая как цитата, цитата, выделение и т. Д. Когда используется вложенный, выделение внутри цитаты должно действительно иметь другое значение, чем при использовании вне цитаты. Поэтому правила CSS по умолчанию применяются ко всему, что находится внизу. И поэтому я не понимаю желания свести вашу значимую вложенную разметку к курсиву и не курсиву, потому что он скрывает основное значение имеющегося содержимого (поскольку подобное форматирование будет применяться к различным значимым частям документа).

Моя рекомендация:

• Предположим, что у вас есть разметка по какой-то причине, поэтому оставьте стиль как есть. Акцент, вложенный в цитату, должен всегда иметь стили элементов предка, потому что есть причина для этого вложения, и он не должен быть скрыт для пользователя визуальным способом
• Просмотрите требования вашего документа и посмотрите, действительно ли вы хотите такого вложения. Если нет, то общего редактора HTML может быть недостаточно для ваших нужд, и вам лучше использовать формат xml, который проверяет определенную схему, которая в вашем случае запрещает использование определенных элементов в других. Затем используйте редактор XML, такой как Xopus или XmlSpy, для редактирования документа.

Извините, если это не является прямым решением вашего вопроса, но я надеюсь, что смогу дать вам другой взгляд на проблему и, возможно, увидеть, что проблемы вообще не может быть. Удачи!

Answer 4

Я бы справился с этим с помощью скрипта, который генерирует необходимые правила вложенности для каждой перестановки. Это единственный способ, которым я бы не стал сходить с ума, поддерживая его.