当某个元素在 Tumblr 主题中不可用时，从该元素中删除 CSS？

Question

我正在构建一个 tumblr 主题，并在永久链接页面上的笔记列表中应用了填充。

启用注释列表并且帖子有转发/喜欢时，它会按预期显示列表，并在顶部和底部填充。我的问题是，当启用了注释列表但该帖子没有注释时，填充创建的间隙仍然可见，因此它创建了一个不应该存在的间隙。

我想知道是否有解决方案？我很确定一定有，但我就是想不通。

在like/reblog 按钮和disqus 框之间创建间隙的一个示例。

http://minori-theme.tumblr.com/post/104674196686/melbourne-based-photographer-brooke-holms

HTML

{block:IfShowNotesList}
 {block:PermalinkPage}
<div class="f-all e-all d-all b-all a-all">
    <section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
                <ul class="postListNotes">
            {block:PostNotes}
                {PostNotes}
            {/block:PostNotes}
                </ul>
    </section>
</div>
{/block:PermalinkPage}
{/block:IfShowNotesList}

CSS

{block:IfShowNotesList}
    ul.postListNotes {padding-top: 50px; padding-bottom: 80px;}
{/block:IfShowNotesList}

Answer 1

{block:****} 标签正是为此目的而创建的：仅当**** 存在时才显示标记。

如果没有要显示的注释，请使用此代码隐藏 ul 元素：

{block:PostNotes}
    <ul class="postListNotes">
        {PostNotes}
    </ul>
{/block:PostNotes}

您也可以隐藏其余元素：

{block:IfShowNotesList}
    {block:PostNotes}
        {block:PermalinkPage}
        <div class="f-all e-all d-all b-all a-all">
            <section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
                <ul class="postListNotes">
                    {PostNotes}
                </ul>
            </section>
        </div>
        {/block:PermalinkPage}
    {/block:PostNotes}
{/block:IfShowNotesList}

Answer 2

使用empty CSS3 属性：

ul.postListNotes:empty {
    padding: 0;        
}

甚至：

ul.postListNotes:empty {
    display: none;
}

如果代码：

{block:PostNotes}
{PostNotes}
{/block:PostNotes} 

产生任何其他空白或 html cmets，:empty 选择器将不起作用

在这种情况下，如果可以的话，应用一个类，假设 ul.postListNotes 上的 .noNotes 每次没有注释要显示并使用此规则：

编辑

ul.postListNotes.noNotes {
    padding: 0!important;
}