Question

我有一个ul列表，并希望隐藏所有不在锚点内的文本。这是来自CMS的标记，因此我无法添加其他选择器...

<ul class="list">
  <li class="sub">
    <a href="#">link</a> not linked
  </li>
</ul>

我尝试使用以下css，但它不起作用。

.list .sub:not(a) {
  display: none;
}

为什么这不起作用？

Jsfiddle：http://jsfiddle.net/9tg0g44e/

Answer 1

.sub:not(a)匹配类.sub的任何元素，如果它不是a元素。

由于.sub此处为li，因此它不是a，因此会隐藏li及其所有内容。

通常情况下，要选择.sub不属于a元素的任何子女，您可以使用.sub > :not(a)代替，但由于其他文字是直接兄弟您赢得的a元素无法使用选择器进行定位。

您可以使用display: none属性代替使用visibility：

.list .sub {
  visibility: hidden;
}

.list .sub a {
  visibility: visible;
}

但请注意this will also hide the bullet，因为它是li元素的一部分，无法单独定位。如果你需要显示子弹，你可以replace it with a :before pseudo-element，它与实际的列表标记略有不同：

.list .sub {
  list-style: none;
  visibility: hidden;
}

.list .sub:before, .list .sub a {
  visibility: visible;
}

.list .sub:before {
  content: '\2022';
}

仅隐藏直接文本子项，而不隐藏CSS中的元素子项

1 个答案: