Как получить доступ к тегу привязки, за которым следует элемент ul?

Question

Я хочу получить доступ к тегам привязки, за которыми следуют только элементы ul.Я использую SCSS.

<ul>
 <li>
  <a href="#">Menu link 1</a>
  <ul><!--more code here --></ul>
 </li>
 <li>
  <a href="#">Menu link 2</a>
 </li>
 <li>
  <a href="#">Menu link 2</a>
 </li>
 <li>
  <a href="#">Menu link 1</a>
  <ul><!--more code here --></ul>
 </li>
</ul>

Answer 1

Несколько вариантов для этого:

1. Использование двойного селектора, такого как :not(:last-child), увеличивает снижение производительности в битах.Таким образом, вам лучше поместить свой общий CSS для случая, в котором за <a> следует <ul>, а затем использовать a:only-child для выбора и форматирования другого случая.
2. Или вы можете поставить <ul> перед<a>, затем используйте Flexbox, чтобы изменить порядок следующим образом:

.parent, .parent ul{
  list-style: none;
  padding: 0;
}
.parent > li {
  display: flex;
  flex-flow: column nowrap;
  padding: 5px;
  border-bottom: solid 1px #ccc;
}
.parent ul {
  order: 2;
}
ul + a {
  color: red;
}

<ul class="parent">
 <li>
  <ul><li>dummy list item</li></ul>
  <a href="#">Menu link 1</a>
 </li>
 <li>
  <a href="#">Menu link 2</a>
 </li>
 <li>
  <a href="#">Menu link 2</a>
 </li>
 <li>
  <a href="#">Menu link 1</a>
  <ul><!--more code here --></ul>
 </li>
</ul>

Answer 2

Css имеет только обратные селекторы, поэтому невозможно делать то, что вы хотите.Но есть альтернативное решение, которое очень похоже на ваше поведение: селектор last-child

В вашем случае вам нужно совместить это с селектором :not().

Вы получите:

a:not(:last-child) {
    background: lightblue;
}

<ul>
 <li>
  <a href="#">Menu link 1</a>
  <ul><!--more code here --></ul>
 </li>
 <li>
  <a href="#">Menu link 2</a>
 </li>
 <li>
  <a href="#">Menu link 2</a>
 </li>
 <li>
  <a href="#">Menu link 1</a>
  <ul><!--more code here --></ul>
 </li>
</ul>