У меня есть решение, которое помогает с не фоновыми стилями. Вы можете увидеть скрипку http://jsfiddle.net/7ku3g/83/, которая является только грубым понятием. Некоторые ключевые моменты: 1) обязательно, чтобы добавленный элемент styleControl был добавлен к внутреннему самому содержащему элементу. Например, вы добавили класс .highlight к элементу .bClass, но в нем был еще один элемент полной обертки, blockquote. 2) Вы хотите удалить элемент styleControl после удаления класса выделения.
В общем, идея состоит в том, чтобы добавить невидимый элемент стиля сначала во внутреннюю оболочку, а затем использовать общий селектор одноуровневых элементов ~ и :not для стилизации элементов вниз. Опять же, это не решает ваши проблемы с фоном , но, кажется, это способ помочь решить истинные наследуемые свойства, поскольку эти стили НЕ применяются к div-обертке, а к недавно созданному первому брату в группе и свойства, примененные на основе этого родного брата, только к тем, к которым они должны применяться.
Одна из проблем, связанных с этой техникой, - это любой «голый текст» (см. http://jsfiddle.net/7ku3g/84/), тогда он не будет стилизован. Так что это не полное решение вашей проблемы. РЕДАКТИРОВАТЬ: Для таких случаев может сработать захват и добавление тщательно обработанных span вокруг этих обнаженных узлов. Что-то похожее на: Стиль определенного символа в строке .
CSS
.highlight.bClass {
background-image: url('http://hostilefork.com/shared/stackoverflow/cc-by-nc-nd.png');
background-repeat: repeat;
}
.highlight.bClass .styleControl {
width: 0;
height: 0;
position: absolute;
}
.highlight.bClass .styleControl ~ *:not(.cClass) {
color: red;
}
ОБНОВЛЕНИЕ: Некоторое дальнейшее объяснение, основанное на комментариях HostileFork. Во-первых, мое решение здесь имеет значение только в том случае, если есть дочерний элемент, который вы хотите запретить наследовать стили (фактические наследуемые стили), которые вы добавляете. Во-вторых, может потребоваться добавить несколько, в зависимости от того, насколько глубоко они вложены. Вот несколько псевдокодов html для обсуждения:
<div> (containing licensed material)
<childA1> (this is the wrapping blockquote in your example; could be anything)
<scriptAddedStyleElementB0>
<childB1>content<endchildB1> (apply styles)
<childB2>content<endchildB2> (don't apply styles)
<childB3> (don't apply styles because a child is not having styles applied)
<scriptAddedStyleElementC0>
<childC1> (apply styles)
<!-- noScriptAddedStyleElementD0 -->
<childD1>content<endchildD1>
<childD2>content<endchildD2>
<endchildC1>
<childC2>content<endchildC2> (don't apply styles)
<endchildB3>
<end-childA1>
<end-div1>
Вы нацелены на самый дальний div, чтобы применить класс highlight к определенным детям, которых вы не хотите затрагивать. Обратите внимание, что A1 и B3 сами не содержат никакого контента (текста / изображений), они просто содержат другие элементы. Это «обертки» в моем использовании этого термина (они просто используются для группировки своих детей, хотя у них может быть стиль).
Чтобы ответить на ваш вопрос «когда нужно прекратить погружение», это когда вы достигаете точки, когда вас больше не волнует наследование стилей. В приведенном выше примере необходимо добавить 2 элемента оформления, один в B0 и один в C0, но не в D0. Это связано с тем, что общий селектор брата ~ применяется только к элементам, у которых тот же родительский элемент и которые следуют за этого брата. Таким образом, B0 собирается применить стили к B1, но не к B2 (нелицензионному) или B3 (содержит нелицензионное). Элемент C0 собирается применить стили к C1 (и его лицензированным дочерним элементам D1 и D2), но избегает стилизации C2. Содержимое B2 и C2 будет по-прежнему наследовать исходные стили от div-оболочки (C2 через B3), в то время как B1, C1, D1, D2 получат стиль лицензирования.
Трудности в этом заключаются в том, что: 1) более ранние версии IE (7 и 8) не распознают некоторые из этих css, в частности селектор :not. Это может потенциально обойтись. 2) мои предыдущие заметки о «голом тексте» или контенте. Если бы B3 выглядел так:
<childB3>
<scriptAddedStyleElementC0>
Some unwrapped text
<childC1>...<endchildC1>
Some other unwrapped text and an <img> tag
<childC2>...<endchildC2>
More unwrapped text
<endchildB3>
Если для лицензирования нужно было стилизовать развернутый текст B3 (в вашем примере он стал красным), вам нужно было бы найти все текстовые узлы с помощью javascript и обернуть их в элементы span, чтобы применить стиль, потому что если вы применяете стиль стиль к B3, тогда он унаследует к C2, который вам не нужен.
Нет сомнений, что то, что вы ищете, трудно достичь. Это было бы невозможно с помощью CSS до появления общего селектора, и это может стать проще с обсуждаемыми стандартами CSS4 (для этой ситуации может быть использована возможность стилизовать родительские элементы от дочерних элементов).