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>

除了submenu类元素的子元素之外，我想选择所有a元素。

我尝试过这样：

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

但是它行不通。在这种情况下正确的选择器是什么？

谢谢。

Answer 1

您好，亲爱的CSS朋友！

换句话说，以您的示例为例，您想选择“位置”和“关于”链接，而不是其他。

（有点脏）

更容易理解的解决方案是将样式应用于所有a，然后将样式应用于其他样式。

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

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

放置样式然后将其删除总是很脏的，因为它的维护性较差，而且较重。但这会做的。

Nicer解决方案

在您的情况下，子菜单链接是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;
}

CSS仅选择没有以此类开头的元素

2 个答案:

（有点脏）

Nicer解决方案