有沒有CSS「haschildren」選擇器？

可能重複：
Is there a CSS parent selector?有沒有CSS「haschildren」選擇器？

是否有一個CSS選擇器，如果一個子元素存在，我只能用？

考慮：

<div> <ul> <li></li> </ul> </div>

我想申請display:none到div的，只有當它不具有至少一個孩子<li>元素。

我可以使用的任何選擇器做到這一點嗎？

來源

2012-08-30 Chaitanya

不可能用CSS，但可以用JavaScript – Ibu

不幸的是，不幸的是，這是不可能的CSS選擇器。

來源

2012-08-30 23:18:27 ThiefMaster

這裏的一些背景資料：https://css-tricks.com/parent-selectors-in-css/ – Typoheads

排序，與:empty但它是有限的。

例子：http://jsfiddle.net/Ky4dA/3/

即使文本節點會導致父母不被認爲是空的，所以DIV內部的UL將保持DIV被匹配。

<h1>Original</h1> 
<div><ul><li>An item</li></ul></div> 

<h1>No Children - Match</h1> 
<div></div> 

<h1>Has a Child - No Match</h1> 
<div><ul></ul></div> 

<h1>Has Text - No Match</h1> 
<div>text</div> 

DIV { 
background-color: red; 
height: 20px;  
} 

DIV:empty { 
background-color: green; 
}

參考：http://www.w3.org/TR/selectors/#empty-pseudo

如果你去的腳本路線：

// pure JS solution 
var divs = document.getElementsByTagName("div"); 
for(var i = 0; i < divs.length; i++){ 
    if(divs[i].childNodes.length == 0){ // or whatever condition makes sense 
     divs[i].style.display = "none"; 
    }   
}

當然，jQuery讓這樣一個容易的任務，但這個任務不是足夠的理由包括：一個完整的文獻庫。

來源

2012-08-30 23:22:09

不幸的是，CSS還沒有任何父規則，如果您必須僅應用它，那麼只有包含特定孩子的父母纔會使用Javascript，或者更容易使用名爲jQuery的JavaScript庫。

的Javascript可以寫在一個similair方式CSS中someways，爲您的例子中，我們將在我們的HTML頁面的底部做這樣的事情：

<script type="text/javascript"> 
    $('div:has(ul li)').css("color","red"); 
</script>

（對於這一點，你將需要包括jQuery庫文檔中，簡單地通過將遵循在<head></head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

來源

2012-08-30 23:23:34

我喜歡這是最緊湊的一個。我將它與非選擇器一起使用，如：jQuery（'。navbar-inner：not（：has（ul li））''。css（'display'，'none'）; –

如果使用jQuery的，你可以嘗試一下這個功能

jQuery.fn.not_exists = function(){ 
    return this.length <= 0; 
} 

if ($("div#ID > li").not_exists()) { 
    // Do something 
}

來源

2012-08-30 23:23:40 Infinity

還有另一種選擇

$('div ul').each(function(x,r) { 
    if ($(r).find('li').length < 1){ 
     $(r).css('display','block'); // set display none 
    } 
})

來源

2012-08-30 23:39:23

有沒有CSS「haschildren」選擇器？

回答

相關問題