css :empty - 没有 JS 的 DOM 状态敏感是否可能？答案

【问题标题】：css :empty - DOM state sensitive without JS is it possible?css :empty - 没有 JS 的 DOM 状态敏感是否可能？
【发布时间】：2014-09-28 00:52:10
【问题描述】：

我决定使用 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()

【问题讨论】：

这看起来不像 css。
它是 SASS，但无论如何它都“编译”为 CSS。我也更新了生成的 CSS。
我无法复制您的问题...jsfiddle.net/t6J3G
什么样的代码会“删除”所有元素？可以发一下吗？
也无法复制您的问题：jsfiddle.net/542p5

标签： jquery html css django django-templates

【解决方案1】：

感谢您的帮助。

问题在于带有不必要换行符的 Django 模板系统 ass-pain（更多此处为 Django templates whitespaces ans empty characters in for loop），它在渲染持久化项目时使用了一些换行符，当“空” DIV 不是真的时导致状态当点击编辑 HTML 时，请查看 Chrome 调试器的屏幕截图。

修复后：

这很糟糕：

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

这可行，但它看起来很糟糕：

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

【讨论】：