не селектор в css не работает?

Question

Ниже приводится код, который я попытался

HTML

<div> 
    <span>Span1</span> 
    <span>Span12</span> 
    <span>Span13</span> 
</div> 

<div> 
    <span>Span1</span> 
    <span>Span12</span> 
    <span>Span13</span> 
</div> 

<span>Span2</span> 
<span>Span3</span> 

CSS

:not(div>span) 
    { 
     color : #ff0000; 
    } 

Я хочу пролеты с span2 и span3 быть красным, используя не селектору

Проверьте Js скрипку

http://jsfiddle.net/82KwV/

Answer 1

:not принимает simple selector в качестве аргумента. div > span - не простой селектор, поэтому он не может использоваться в этом контексте. В результате вы не можете сказать «Я хочу, чтобы в CSS было все, что не было, а родительский div был красным», и вам нужно идти на компромисс.

Одна из возможностей - нацелить определенные подмножества общего случая. Так, например, тонко разные «все пролеты, которые не имеют Див родителя» соответствует:

:not(div) > span { color: red } 

В более сложных случаях этот подход может оказаться невозможным (например, вы не можете использовать div, p вместо div выше), в котором случае вам придется обратиться к другим вариантам, таким как «делать/отменить» трюк:

span { color: red } 
div > span { color: inherit } 

Это устройство может быть легко расширено до p > span, div > span, но, конечно, есть компромисс: эти правила могут переопределить что-то другое ваши таблицы стилей.

Answer 2

:not не разрешает этот тип селектора. Лучше использовать

body > span { color: red } 

Это чище, чем исправление его, используя несколько правил.