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

Question

我正在构建一个tumblr主题，并在永久链接页面上将填充应用于我的备注列表。

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

我想知道是否有解决方案？我非常肯定必须有，但我无法理解它。

在此类/ 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注释，：empty选择器将无效

在这种情况下，如果可以，请申请课程，每当没有要显示的笔记并使用此规则时，请在.noNotes上说ul.postListNotes：

修改

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