Css顯示：無法工作中途

-2

我有以下css，如果沒有記錄，則顯示設置爲none。但是，它在頂部顯示一條紅線。你可以在這裏驗證它http://jsfiddle.net/3agn58u4。任何想法是什麼造成這個？Css顯示：無法工作中途

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>

來源

2015-10-16 Ninja Cowgirl

你的小提琴與你的CSS不匹配，而display：none實際上沒有生效。 – BoltClock

如果你在結果窗口中看到最右側，你會看到我在說什麼。

TEST

–

什麼是空的？我刪除它，紅線確實消失。 http://jsfiddle.net/3agn58u4/1/ – DivineChef

這是因爲TasksCount背景色設置爲紅色。如果您想保持相同的顏色，您可以設置padding:0。或者，

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

編輯

這個答案已經downvoted多次，因爲它沒有回答真正的問題：爲什麼:empty屬性不會發生作用

。

正如其他人指出的，這個CSS屬性僅匹配沒有子元素的元素。這是這個問題的正確答案。

的任擇議定書要求

「然而，在頂部顯示一個紅色的線，你可以在這裏驗證 ...任何想法是什麼原因造成的？」

我錯過了關於空白屬性的觀點，並建議首先刪除當DIV及其子項爲空時部分解決「紅線」的填充。但是，這還會在元素有內容時剝離元素的填充。

如果您認爲此問題的答案更完整，請在下面留言，我會相應更新。

來源

2015-10-16 17:48:12

嘗試添加一個工作示例到您的答案。否則，它看起來像一個評論 – ochi

這正是OP的問題的答案。他想擺脫由背景色造成的紅線。 –

這完全沒有意義。你也可以通過刪除所有CSS來消除紅色，但這並不意味着這就是解決方案。他的問題在於，當div不是實際爲空時，他期望應用'：empty' CSS屬性。 – leigero

根據w3school：

的：空選擇每一個沒有孩子的（包括文本節點）元素相匹配。

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(); 
}

來源

2015-10-16 17:56:56 Alex

的問題是，你要設置的CSS樣式，在此基礎上爲empty一個屬性，但該div實際上不是空的。

您可以在片段中看到，:empty選擇器不適用於實際上不爲空的<div>元素（即使您看不到其內容）。

.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內有實際的鏈接時壞（或不按需要）。

來源

2015-10-16 18:04:14 leigero

我想upvote這個答案，但另一方面，我正在考慮關閉和刪除問題，因爲它是低質量無論如何。事實上，如果我知道OP會固執地忽略所有正確的答案 - 以及我的評論，我完全可以早日做到這一點。 – BoltClock

@BoltClock是的，我同意。我注意到接受答案的海報正在做出一個善意的努力，使答案更好，至少是那樣。 – leigero

的: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

這就是爲什麼你的顯示器沒有任何不正常的原因。

來源

2015-10-16 18:08:30 Pbk1303

Css顯示：無法工作中途

回答

相關問題