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

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这里是a li,它不是a a,因此隐藏了li它的所有内容.

通常,要选择.sub不是a元素的任何子元素,您可以使用.sub > :not(a),但由于其他文本是a元素的直接兄弟,因此您将无法使用选择器来定位它.

而不是使用的display: none,你可以使用visibility属性来代替:

.list .sub {
  visibility: hidden;
}

.list .sub a {
  visibility: visible;
}

但请注意,这也会隐藏子弹,因为它是li元素的一部分,不能单独定位.如果您需要显示项目符号,可以使用:before伪元素替换它,该伪元素与实际列表标记略有不同:

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

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

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