如何使用CSS删除没有html标记的字符串

Question

我需要删除没有html标记的字符串。

例如：

<div class="A"> 
 
    <a href="#" class="link">keep this</a> and i want to remove this 
 
</div>

我能做到这一点只用CSS？

Answer 1

也许你可以使用font-size ::

.A { 
 
    font-size: 0; 
 
} 
 
.A a { 
 
    font-size: 20px; 
 
}

<div class="A"> 
 
    <a href="#" class="link">keep this</a> and i want to remove this 
 
</div>

Answer 2

设置 “A” 级的内部风格是默认为空。设置一个辅助班来处理“.A a”。这将允许你有两种不同的风格。一个用于锚定，一个用于非锚定。

.A { color: rgba(0, 0, 0, 0.5); } //Set this to transparent 
.A a { color: #000 } 

就是这样的。

Answer 3

你可以使用visibility：

.A { 
 
    visibility: hidden; 
 
} 
 
.A a { 
 
    visibility: visible; 
 
}

<div class="A"> 
 
    <a href="#" class="link">keep this</a> and i want to remove this 
 
</div>

注 - 当然这不从DOM本身去除串/元素的问题，它只是隐藏，但达到同样的目的。

Answer 4

你不能用纯css做到这一点。如果您无法更改标记，那么您将需要使用JS来抓取您想要保留的内容并删除其余内容。

如果你有任何控制标记，你应该考虑使用不同的标记。你可以有一个最初隐藏的替代元素。

<div class="A"> 
    <a href="#" class="link">keep this</a> and i want to remove this 
</div> 
<div class="A hidden"> 
    <a href="#" class="link">keep this</a> 
</div> 

你也可以附上你想在一个span标签移除，并给它以后可以引用类的其他内容。

<div class="A"> 
    <a href="#" class="link">keep this</a> <span class="bad-stuff">and i want to remove this</span> 
</div> 

Answer 5

您还可以使用display: none与:not()伪选择

.A :not(a) { 
    display: none; 
} 

编辑：这不起作用

无论是做这个的：

.A { 
    display:none 
} 

.A a { 
    display: inline!important; 
}