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

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>

Answer 2

有几种选择：

使用双选择器，例如:not(:last-child)会增加一点性能下降。因此，您最好放上通用CSS 对于<a>后跟<ul>然后使用的情况 a:only-child选择并格式化另一种情况。
或者您可以将<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>

如何访问后跟ul元素的锚标记？

2 个答案: