css：空 - 没有JS的DOM状态敏感可能吗？

Question

我决定使用CSS :empty在一些列表容器中使用带有文本的背景图像，表明它是空的。

SASS：

div#selected-sources:empty
    background-image: url('/static/images/empty_conversions_placeholder.gif')

CSS：

div#selected-sources:empty {
  background-image: url("/static/images/empty_conversions_placeholder.gif"); }

在以下情况下工作正常：

1）我显示空容器 - 背景设置为图像

2）添加项目后，它会按预期消失，

但是在删除所有项目后 - 空状态 - 未设置背景。

JS控制台输出：

$('#selected-sources').is(':empty')
false

更新（JS部分） - 追加

$('#selected-sources')
    .append "<span id='#{ui.item.id}'
            class='tag_with_remove sources'><i class='icon-remove'></i>
            <span class='label'>#{ui.item.category}: #{ui.item.name}</span></span>"

更新（JS部分） - 删除

$('body').on 'click', '#selected-sources i.icon-remove', () ->
    $(@).parent().remove()

Answer 1

感谢您的帮助。

问题出在Django模板系统的痛苦与不需要的串行换行（更多这里Django templates whitespaces ans empty characters in for loop），虽然渲染持久化的项目是通过一些换行符来做的，但当“空”DIV是当点击编辑HTML时，不是真的空了，看看Chrome的debuger截图。

修复后：

这个问题：

<div id="selected-sources"  style="min-height:150px; max-height:500px">
    {% for source in sources %}
        <span id='{{source.0}}' class='tag_with_remove sources'>
        <i class='icon-remove'></i>
        <span class='label'>source: {{source.1}}</span>
        </span>
    {% endfor %}
</div>

这个工作，但它看起来如何SUCKS：

<div id="selected-sources"  style="min-height:150px; max-height:500px">{% for source in sources %}<span id='{{source.0}}' class='tag_with_remove sources'><i class='icon-remove'></i><span class='label'>source: {{source.1}}</span></span>{% endfor %}</div>