使用css隐藏“非元素”

Question

以下代码：

<li>
    <a href="...">bla</a>
    <span>blabla</span>
    hidethistext
</li>

我如何使用CSS隐藏“非元素”“hidethistext”而不影响其他所有内容？display:none意思是，什么是正确的选择器？ 尝试使用:not(..)，但这似乎不是正确的方法。

Answer 1

你做不到。使用css，您只能选择元素。 :not选择器用于选择不属于x类的元素，没有标识y或不是元素z。但hidethistext只是一个文本节点，无法选择。唯一的解决方案是将其包含在<span/>元素中，然后是另一个类，然后是第一个span

Answer 2

您可以使用visibility属性，因为它可以被覆盖。

<li>
    <a href="...">bla</a>
    <span>blabla</span>
    hidethistext
</li>

CSS

/* hide all elements (including textnode "hidethistext" */
li {
  visibility: hidden;
}

/* set other elements to visible */
li span, li a {
  visibility: visible;
}

this jsfiddle上的示例。

相关SO question。