Выберите все метки внутри элемента, кроме одного div

Question

Попытка выбора всех меток внутри элемента, кроме меток внутри одного дочернего div. Пробовал два подхода, но ничего не кажется, работает

.parentDiv *:not(.skipLabelsParent) label { 
    display: inline-block; 
    margin-bottom: 12px; 
} 

Это не удается, потому что * выбирает все родители в том числе дочерние элементы skipLabelsParent класса и родителей с наклейками внутри.

.parentDiv label:not(.skipLabelsParent label) { 
    display: inline-block; 
    margin-bottom: 12px; 
} 

Я не уверен, почему это не удается.

Любые решения, кроме этого?

fiddle здесь

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

Answer 1

Я думаю, что самый простой способ сделать то, что вы хотите, чтобы сделайте некоторые интеллектуальные переустановки ярлыков, которые вы хотите пропустить с хорошим селектором:

.parentDiv .skipLabels{/*your css here*/) 

и стиль ребенка div с этим селектором. Это будет наименьший объем работы.

Далее, в зависимости от того, сколько этикетки мы говорим о, чтобы добавить класс непосредственно к меткам, которые вы хотите пропустить, так что следующий код будет пропускать <label> «S с классом .skipLabels:

.parentDiv label:not(.skipLabels) { 
    display: inline-block; 
    margin-bottom: 12px; 
} 

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

.parentDiv{ 
    display: inline-block; 
    margin-bottom: 12px; 
} 
.skipLabels{ 
    display: .....; 
    margin-bottom: ....; 
} 

Таким образом, вы можете поместить .skipLabels класс в любом месте и вы w плохо знаете, стиль будет действовать, как вы хотите.

Answer 2

В вашем CSS вы можете определить

.parentDiv > label{ 
    color: red; 
} 

Благодаря «>» - оператор, только элементы, которые прямые дети элемента перед выбором. В вашем случае только первый ярлык «Pnoe».

Answer 3

Учитывая это вложенная div/label фрагмент:

div:not(.skipme) > label { 
 
    color: red; 
 
}

<div class="parentDiv"> 
 
    <label>Pnoe</label> 
 
    <div> 
 
    <label>Pnoe</label> 
 
    <label>Pnoe</label> 
 
    <div> 
 
     <label>Nested Phoe</label> 
 
    </div> 
 
    </div> 
 
    <div class="skipme"> 
 
    <label>skip me</label> 
 
    </div> 
 
    <div class="somediv"> 
 
    <label>Phoe</label> 
 
    <div class="another-div"> 
 
     <label>Phoe</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Я считаю, что это не работает, потому что вы не можете цепи селекторы в :not пока http://caniuse.com/#search=%3Anot

https://developer.mozilla.org/en/docs/Web/CSS/:not

В настоящее время вы можете использовать только «простые селекторы»

https://drafts.csswg.org/selectors-3/#simple-selectors

Это работает, например:

HTML:

<div class="parentDiv"> 
    <label>Pnoe</label> 
    <div> 
    <label class="skip">Pnoe</label> 
    <label class="skip">Pnoe</label> 
    <div> 
     <label class="skip">Pnoe</label>  
    </div> 
    </div> 
</div> 

CSS:

.parentDiv label:not(.skip) { 
    color: red; 
} 

https://jsfiddle.net/gjaozryL/19/

В то время как этот селектор ломает все вместе:

HTML:

<label>Pnoe</label> 
<div class="parentDiv"> 
    <label>Pnoe</label> 
    <div> 
    <label class="skip">Pnoe</label> 
    <label class="skip">Pnoe</label> 
    <div> 
     <label class="skip">Pnoe</label>  
    </div> 
    </div> 
</div> 

CSS:

label:not(.parentDiv .skip) { 
    color: red; 
} 

https://jsfiddle.net/gjaozryL/20/