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

Question

我有一个 ul 列表，我想隐藏所有不在 anchor 内的文本。这是来自 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 元素的直接同级元素，您将无法使用选择器将其作为目标。

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

.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';
}