div為空時CSS更改類

Question

加載頁面時，我設法確保可編輯的DIV用紅色下划線顯示。 然后，當我輸入文字時，它變成白色。 到現在為止還挺好。 但是，當我使用功能或只是將其刪除（退格/刪除）清除該字段時，它仍為白色。 如何使它重新理解為空，並在清除文本后再次更改類？

CSS：

#Control1, #Control2, #Control3 {
background-image:url('img/underline_red.png');
}

#Control1:not([value=""]), #Control2:not([value=""]), #Control3:not([value=""])  {
background-image:url('img/underline.png');
}

HTML：

<div contentEditable=true id="Control1" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>

<br>

<div contentEditable=true id="Control2" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>


<br>

<div contentEditable=true id="Control3" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>


<br>

<div id="border">
<div contentEditable=true id="note" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
</div>


<br>


<button class="button"  onclick="clearControl1('Control1'), clearControl2('Control2'), clearControl3('Control3'), clearNote('note')"/>Clear</button>

Javascript：

<script type='text/javascript'>
function clearNote(note)
{
    document.getElementById(note).innerHTML = "";
}
function clearControl1(Control1)
{
    document.getElementById(Control1).innerHTML = "";
}
function clearControl2(Control2)
{
    document.getElementById(Control2).innerHTML = "";
}
function clearControl3(Control3)
{
    document.getElementById(Control3).innerHTML = "";
}
</script>

Answer 1

試試看：

div:empty {
   some stuff like color
}

此處的摘錄來自“瀏覽器支持”的詳細信息。

https://css-tricks.com/almanac/selectors/e/empty/

通常，有一些CSS選擇器可以幫助您對高級內容（例如“第一個”或“每個第二個”）做出反應。