Question

如果没有记录，我有以下css和display设置为none。但是，它在顶部显示一条红线。您可以在此处验证http://jsfiddle.net/3agn58u4。知道是什么导致了这个吗？

CSS：

<style>

body {
    font-family:Calibri;
}
#customTaskNotification {
    position:relative;


}
.TasksCount {
    position:absolute;
    top: -.1px; 
    right:-.1px;
    padding:1px 2px 1px 2px;
    background-color:#ff0000; /* orange #ef8913* dark-pink #d06079 */
    color:white;
    font-weight:bold;
    font-size:1.05em;
    width:50%;
    text-align: center;

    border-radius:50%!important;
    box-shadow:1px 1px 1px gray;
}

div.TasksCount:empty { 
    display: none;
}
</style>

Answer 1

问题是你试图在属性empty上设置CSS样式但该div实际上不是空的。

您可以在提供的代码段中看到:empty选择器不适用于实际上不为空的<div>元素（即使您看不到其内容）。< / p>

.testDiv {
    background-color:#ff0000;
    height: 30px;
    width: 40px;
    margin: 5px;
}
.testDiv:empty { 
    background-color: blue;
}

<div class="testDiv">
    <a href="http://jsfiddle.net/"></a> 
</div>

<div class="testDiv"></div>

<div class="testDiv">
</div>

如果此案例在您的解决方案中很流行，您可能需要使用Javascript来检查div的实际内容。

您可以更改<div>的填充，是的，当div的内容不可见时，它会将其隐藏在您的视图中，但您还要删除<div>中的填充所以当div中有实际的链接时，它可能看起来很糟糕（或者不是那么理想）。

Answer 2

:empty伪选择器将选择

元素

不包含任何内容
或每个没有子元素的元素（包括文本节点）。
或匹配空的但只有html注释的元素。

示例：

<p></p><!-- empty element -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><!-- test --></p><!-- empty element with comment -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><a></a></p><!-- element has no text,but has child nodes,hence not empty -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p> </p><!-- element has space ,hence not empty -->

请看小提琴：EMPTY ELEMENT

这就是为什么你的显示无法正常工作的原因。

Answer 3

根据w3school：

：empty选择器匹配每个没有子元素的元素（包括文本节点）。

TasksCount不为空，因为它有一个子（a元素），因此display:none;不起作用。通过css，无法检查子项是否为空，然后选择父项。

解决方案：使用Javascript或Jquery。

if($('.TasksCount').find('a').html() == ''){
    //Or you can add class or add style $('.TasksCount').css('display','none');
    $('.TasksCount').hide();
}

Answer 4

那是因为TasksCount背景颜色设置为红色。如果要保持相同的颜色，可以设置padding:0。或者，

.TasksCount {
background-color: #fff;
box-shadow: none;
}

修改

这个答案多次被低估，因为它没有回答真正的问题：

为什么:empty属性没有生效。

正如其他人所指出的，这个CSS属性只匹配没有子元素的元素。这是这个问题的正确答案。

OP问

“但是，它在顶部显示一条红线。您可以在此处进行验证 ......知道造成这种情况的原因是什么？“

我错过了关于空属性的观点，并建议首先删除填充，当DIV及其子项为空时，该填充部分解决了“红线”。但是，当元素具有内容时，它也会从元素中剥离填充。

如果您认为对这个问题有更完整的答案，请在下面留言，我会相应更新。

Css显示：无效半途

4 个答案: