div为空时CSS更改类

Question

当我加载我的页面时，我已经设法确保我的可编辑 DIV 带有红色下划线。然后当我输入文字时，它变成白色。到目前为止，一切都很好。但是，当我清除该字段时，无论是使用函数还是只是简单地删除它（Backspace/delete），它仍然是白色的。如何让它重新理解它是空的，并在文本被清除后再次更改课程？

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
}

此处提供有关 Browser-Support 的详细信息，此 sn-p 来自哪里

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

一般来说，有一些 CSS 选择器可以帮助您对“第一”或“每秒”等高级内容做出反应。