CSS: использование отрицания для * всех элементов

Я хочу выбрать все элементы <img>, которые находятся внутри <article>, а не внутри <figure>

После этих 2: Как создать css для всех элементов, кроме одного класса?

https://www.w3.org/TR/css3-selectors/#negation< /а>

Все <img> завернуты в <a> или <p>. Кажется, это можно сделать с помощью отрицания. Мое правило сейчас выглядит так:

article *:not(figure) img { border: 2px solid red; }

Любые советы, почему это не работает?


css css-selectors negation
person Vaino    schedule 23.05.2016    source источник
comment
Можете ли вы опубликовать HTML-код, необходимый для воспроизведения проблемы?   -  person Pugazh    schedule 23.05.2016
comment
Почему бы просто не указать разные правила для article img и figure img? jsfiddle.net/ds33989g   -  person alex    schedule 23.05.2016
comment
@alex думал об этом, предпочел бы немного умнее   -  person Vaino    schedule 23.05.2016
comment
Я думаю, что способ @alex самый умный...   -  person Jordi Nebot    schedule 23.05.2016
comment
Выбор всех * — не самый умный способ. Эти селекторы самые медленные...   -  person dingo_d    schedule 23.05.2016

Ответы (1)


arrow_upward
3
arrow_downward

Это работает, но вы сообщаете браузеру, что img элементы должны быть обернуты во что-то. Таким образом, теги img непосредственно внутри тега article не будут работать, но все, что вложено, например. в div будет:

article *:not(figure) img { 
  border: 2px solid red; 
}
<article>
  <img src="//placehold.it/50">
  <figure class="x">
    <img src="//placehold.it/50">
  </figure>
  <div>
    <img src="//placehold.it/50">
  </div>
</article>

Что вам, вероятно, нужно:

article *:not(figure) img,
article > img{ 
  border: 2px solid red; 
}
<article>
  <img src="//placehold.it/50">
  <figure class="x">
    <img src="//placehold.it/50">
  </figure>
  <div>
    <img src="//placehold.it/50">
  </div>
</article>

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

article img {
  border: 2px solid red; 
}

article figure img { 
  border: none; 
}
<article>
  <img src="//placehold.it/50">
  <figure class="x">
    <img src="//placehold.it/50">
  </figure>
  <div>
    <img src="//placehold.it/50">
  </div>
</article>

Но будет ли это полезно для вас, зависит от всего контекста.

person Jeroen    schedule 23.05.2016
comment
Универсальный селектор глупо быстр - это гарантированное совпадение, и, вероятно, браузер в любом случае игнорирует его в этом контексте. Это :not() медленный, потому что это одна дополнительная инструкция для браузера, и медленный только потому, что он не оптимизирован для критического пути, в отличие от тэгов, идентификаторов и классов. Использование каскада здесь просто не составляет труда — вам не нужно придумывать для этого причину. - person BoltClock; 23.05.2016
comment
@BoltClock Спасибо за ваш отзыв. Это интуитивно понятно + я поверю вам на слово. В любом случае, я не думаю, что знаю много об относительной производительности селекторов. Я немного переписал свой ответ, ослабил/убрал требования к скорости селекторов. Насколько я могу судить, даже без подробностей о производительности, пост должен помочь OP. - person Jeroen; 23.05.2016