如果 HTML 元素內有特定文本，則使用 CSS 隱藏該元素？

Question

如果網站的每個元素沒有自己的類，那麼很難操作網站。

例如，如何隱藏下面程式碼中的第二個元素？

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

元素內部的文字永遠不會改變。

我正在使用 Stylish 和 Firefox 來編輯網站的 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。