thể trùng lặp:
Is there a CSS parent selector?Có bộ chọn CSS "haschildren" không?
Có một selector css tôi có thể sử dụng chỉ khi một phần tử con tồn tại?
xem xét:
<div> <ul> <li></li> </ul> </div>
Tôi muốn áp dụng display:none để div chỉ khi nó không có yếu tố ít nhất một con <li>.
Bất kỳ bộ chọn nào tôi có thể sử dụng làm điều này?
Không, tiếc là không thể thực hiện với bộ chọn CSS.
Dưới đây là một số thông tin cơ bản: https://css-tricks.com/parent-selectors-in-css/ – Typoheads
Sắp xếp, với :empty nhưng bị giới hạn.
Ví dụ: http://jsfiddle.net/Ky4dA/3/
Ngay cả các nút văn bản sẽ làm cho cha mẹ để không bị coi là có sản phẩm nào, do đó, một UL bên trong DIV sẽ giữ DIV khỏi bị phù hợp.
<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;
}
tham khảo: http://www.w3.org/TR/selectors/#empty-pseudo
Nếu bạn đi con đường kịch bản:
// 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";
}
}
Tất nhiên, jQuery làm một công việc như thế này dễ dàng hơn, nhưng một trong những nhiệm vụ này không phải là đủ biện minh để bao gồm toàn bộ thư viện.
CSS không có bất kỳ quy tắc cha mẹ nào, cách duy nhất xung quanh nó nếu bạn chỉ áp dụng cho cha mẹ có con cụ thể là Javascript hoặc dễ dàng hơn với thư viện javascript được gọi là jQuery.
Javascript có thể được viết theo một cách similair để CSS trong someways, ví dụ của bạn, chúng tôi sẽ làm một cái gì đó như thế này ở dưới cùng của trang HTML của chúng tôi:
<script type="text/javascript">
$('div:has(ul li)').css("color","red");
</script>
(Đối với điều này bạn sẽ cần phải bao gồm jQuery thư viện trong tài liệu của bạn, chỉ cần bằng cách đặt sau trong <head></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
tôi thích cái này nhiều nhất vì nó rất nhỏ gọn. Tôi đã sử dụng nó cùng với bộ chọn không như: jQuery ('. Navbar-inner: not (: has (ul li))'). Css ('display', 'none'); –
của bạn Nếu bạn sử dụng jquery, bạn có thể thử chức năng này
jQuery.fn.not_exists = function(){
return this.length <= 0;
}
if ($("div#ID > li").not_exists()) {
// Do something
}
Có một tùy chọn
$('div ul').each(function(x,r) {
if ($(r).find('li').length < 1){
$(r).css('display','block'); // set display none
}
})
không thể với css, nhưng có thể với javascript – Ibu