селектор отсутствия класса в элементе или его родителях

#css #mediawiki

Вопрос:

Я пытаюсь изменить отвратительный цвет MediaWiki по умолчанию для посещенных ссылок и сохранить красный цвет для новых ссылок. Новые ссылки имеют класс new или их родители имеют этот класс. Итак, я попытался

 :not(.new) a:not(.new) { color: #0074D9 !important; }

Но, как я проверил в консоли браузера, это правило перезаписывает li.new a — чего не должно быть. Немного экспериментирую,

li:not(.new) a:not(.new) сохраняет красный цвет для li.new a ,
*:not(.new) a:not(.new) перезаписывает красный цвет

Можете ли вы объяснить это поведение и порекомендовать правило CSS, применяющее синий цвет для всех ссылок, кроме новых?

Ответ №1:

:not(.new) будет соответствовать каждому элементу, у которого нет new класса. Так, например :not(.new) a , in <li class="new"><span><a>...</a></span></li> будет соответствовать span a . В общем, :not() довольно опасно использовать без сопутствующего определенного класса или идентификатора, который, как вы знаете, не будет использоваться в другом месте.

Вам нужны « a теги, у которых нет .new предка» (в отличие от « a тегов, у которых нет .new предка»), которые не могут быть выражены как селектор CSS. Учитывая, что вы знаете, что .new элемент является прародителем, вы могли бы вместо этого написать что-то вроде :not(.new) > * > a .

1. Спасибо за объяснение <span> роли и за ссылку для обсуждения. В итоге я выбрал в a { color: #0074D9 !important; } a.new, .new a { color: #ba0000 !important; } качестве основного варианта на данный момент, у MediaWiki есть некоторые проблемы, которые нужно решить сегодня.

Ответ №2:

задайте цвет для li.new a and li a.new , а затем задайте цвет для li:not(.new) a and li a:not(.new) .

Если вы хотите, чтобы только посещенные ссылки меняли цвет, добавьте :visited в селекторы css

 ul li.new a, ul li a.new {
color:red
}
li:not(.new) a {
color:green
}
a:not(.new) {
color:green
}

 <ul>
  <li>
      <a href="#" >Normal Link</a>
  </li>
  <li class='new'>
     <a href="#">this will NOT be  green because LI has class new </a>
  </li>
  <li>
      <a href="#" class='new'>this will NOT be green because it has class new</a>
  </li>
   <li>
      <a href="#" >Normal Link</a>
  </li>
</ul>