CSS выбирает только те элементы, которые не имеют класса, начинающегося с этого

Question

Привет,

У меня есть этот HTML-код:

<ul>
 <li>
  <a href="#">Locations</a>
  <ul class="submenu1">
   <li><a href="https://url.com">London</a></li>
   <li><a href="https://url.com">York</a></li>
  </ul>
 </li>
 <li>
  <a href="#">About</a>
  <ul class="submenu2">
   <li><a href="https://url.com">Site</a></li>
   <li><a href="https://url.com">Contact</a></li>
  </ul>
 </li>
</ul>

Я хочу выбрать все элементы a, кроме тех, которые являются дочерними для элементов класса submenu.

Я пытался так:

ul li a:not([class^="submenu"] a) {background-color:darkkhaki;}

но это не сработает. Какой правильный селектор для этого случая?

Спасибо.

Answer 1

Здравствуйте, дорогой друг CSS!

Другими словами, на вашем примере вы хотите выбрать ссылки "Местоположения" и "О программе", но не остальные.

(Вид) dirtyone

Более простое для понимания решение - применить стили ко всем a, а затем удалить стили к другим.

li > a {
     /* Styles you want to apply */
}

[class^="submenu"] a {
    /* Remove styles here */
}

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

Более хорошее решение

В вашем случае ссылки подменю являются единственным потомком ваших элементов li.Вот почему я бы попытался нацелить ссылки, которые являются не только дочерними по отношению к вашему элементу списка, чтобы оформить их, например, так.

li a:not(:only-child) {
    /* Your styles here */
}

Для получения дополнительной информации о псевдоклассе only-child я оставляю вас с некоторымичтение :) https://developer.mozilla.org/fr/docs/Web/CSS/:only-child

Не стесняйтесь, если у вас есть вопрос, и получайте удовольствие!

Answer 2

Вариант 1:

Это будет работать:

ul li a {
  background-color: darkkhaki;
}
ul ul li a {
  background-color: transparent;
}

Просто сбросьте стили для элементов, стиль которых не требуется.

Вариант 2:

Если у вас есть контейнер, например <div id="menu">, вы можете сделать:

#menu > ul > li > a {
  background-color: darkkhaki;
}