CSS Not Selector: Выбрать все, кроме внутри элемента

Question

У меня есть класс «item», появляющийся на всей странице. Стиль страницы одинаковый на всей странице. Однако я не хочу, чтобы стиль применялся, когда он появляется в элементе с классом «группа». Я бы очень хотел использовать: not pseudo selector, поэтому мне не нужно создавать другой стиль для этого особого случая.

CSS

.item, .group div:not(.item){ 
    color:red; 
} 

HTML

<div class="item">I have style!</div> 
<div class="group"> 
    <div class="item">No style for me, thanks!</div> 
</div> 

Answer 1

Это не является идеальным решением, но вы могли предназначаться на .group DIV и сказать что-то вроде:

div:not(.group) .item { 
    color: red; 
} 

Вот скрипку, чтобы играть с ним: http://jsfiddle.net/jqxgetsj/

только Constrain t заключается в том, что у вас должны быть прямые родительские селекторы или что-то довольно целевое.

Answer 2

Вы можете использовать значение initial и сделать это таким образом:

.item { 
 
    color:red; 
 
} 
 
.group div.item { 
 
    color:initial; 
 
}

<div class="item">I have style!</div> 
 
<div class="group"> 
 
    <div class="item">No style for me, thanks!</div> 
 
</div>

Answer 3

Theres нет родительского селектора в CSS, поэтому вы не можете выходить наизнанку. Theres селектор ребенка, хотя, который может быть использован большой в вашем примере:

body > .item { 
 
    color:red; 
 
}

<div class="item">I have style!</div> 
 
<div class="group"> 
 
    <div class="item">No style for me, thanks!</div> 
 
</div>