我可以通過其中包含的內容/值隱藏HTML標記嗎？

Question

我試圖從一個頁面隱藏h1標籤，現在它是一個動態頁面，所以它們沒有任何可以鎖定的鉤子。我希望他們能夠從CSS中快速修復目標內容。

我做了一些研究和嘗試以下方法：

<div id="pageH1"> 
<h1>value</h1> 
<div class="clear"></div> 
</div> 


h1[att~=value] { 
    display:none; 
} 

h1[att=value] { 
    display:none; 
} 

但是也沒有工作，我想知道，這是東西，可以用CSS來實現或我將需要使用JS？

Answer 1

你不能通過CSS來做到這一點，這可能會成爲CSS4的一個功能，但不起作用的CSS3。

你將通過javascript來做到這一點。

這裏是一個簡單的jQuery示例。 （View the JSFiddle）

$('h1:contains("value")').hide(); // Hide any h1 element that contains "value" 

上面的代碼將匹配以下行的ALL。

<!-- All three h1 tags will be matched --> 
<h1>value<h1> 
<h1>value #2<h1> 
<h1>This is another h1 with "value" #3</h1> 

你可以添加一個.no-hide類，並做到以下幾點：

// Hide all h1 tags with value, EXCEPT .no-hide 
$('h1:contains("value"):not(.no-hide)').hide(); 

這將導致：

<h1>value</h1>            <!-- Hidden --> 
<h1>value #2</            <!-- Hidden --> 
<h1>This is another h1 with "value" #3</h1>    <!-- Hidden --> 
<h1 class="no-hide">This has value but will not hide</h1> <!-- NOT Hidden --> 

做你需要什麼pure CSS目前不可能（據我所知糾正我，如果我錯了）。

Answer 2

您可以使用可視性隱藏 像

H1

{

visibility：hidden的;

}

通過使用這款U可以隱藏h1標籤.....

Answer 3

雖然沒有CSS的解決方案存在，一個簡單的JavaScript函數可以解決你的問題

function forContent (selector, content, action) { 
    [].forEach.call (document.querySelectorAll (selector), function (h) { 
    (content === null || 
    typeof content == 'function' && content (h.innerHTML) || 
    typeof content == 'string' && content == h.innerHTML || 
    content.test && content.test (h.innerHTML)) && action (h); 
    }); 
} 

查看樣本小提琴：http://jsfiddle.net/jstoolsmith/uL9DZ/

Answer 4

：空

有一個CSS選擇器..我們希望，將很快獲得批准。

• :empty on w3
• :empty on google
• css selector empty on SO
• :empty support on sitepoint (support reference)

對於你的情況，我不推薦使用：空尚未。

我會使用jQuery。

if ($('#element').is(':empty')){ 
    //your coding 
} 

或

if ($('h1').is(':empty')){ 
    //your coding 
} 

---

只是應用程序的，如果空 '每個' 被 '刪除'。

$('h1:empty').remove(); /* take the h1 OUT of the DOM */ 

或

$('h1:empty').hide(); /* display:none, visibility:hidden, opacity:0 */