如果 HTML 元素内部有特定文本，是否使用 CSS 隐藏它？

Question

如果网站没有针对每个元素的专属类，则很难进行操作。

例如，我如何隐藏下面代码中的第二个元素？

<p>
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</p>

元素内部的文本永远不会改变。

我正在使用 Firefox 的 Stylish 来编辑网站的 CSS/HTML。

Answer 1

我不知道如何仅使用 CSS 和 HTML 来使用逻辑（识别标签中的值并执行特定操作），您需要 Javascript 或类似的东西来实现这一点。但是，如果您希望隐藏文本块中的第二个 p 元素，则可以使用 nth-of-type CSS 选择器来实现：

将 p 标签包装在 div 中，并为 div 赋予一个类。

<div class="HideChild">
    <p>te</p>
    <p>st</p>
    <p>ing</p>
</div>

然后在你的 css 中创建一个这样的选择器：

.HideChild p:nth-of-type(2)
{
display: none;
}

将 p 标签包装在 div 中并使用类意味着您可以将此功能重复用于页面上的多个文本块。如果您想更改隐藏的行，请更改 nth-child 后的数字，如果您希望页面显示应替换行的间隙，请将其替换display: none为visibility: hidden。