html - 如何在 Wordpress 中以正确的方式分配嵌套评论样式？

Question

这里遇到了一个大问题，这让我一整天都无法解决......我无法自己解决它，我猜是因为缺乏 CSS 技能。我在谷歌上搜索了很多，做了很多试错，但没有任何结果......

我正在构建我的第一个 Wordpress 模板，并希望为我的嵌套评论提供一些“风格”。我的问题是，我不知道如何分配“嵌套评论”特定的 css 细节，因为评论本身只使用基本评论 css 代码，而不是“嵌套”代码!

这是我的 HTML 代码

<ol class="commentlist">
        <li class="comments" id="comment-<?php comment_ID(); ?>">
            <div class="commentAvatar"><?php echo $avatarurl["url"]; ?></div>
            <div class="comment" id="comment-<?php comment_ID() ?>">
                <div class="commentmetadata"><span><a href="#"><?php comment_author() ?></a></span> am <?php comment_date('j. F Y') ?> um <?php comment_time('H:i') ?> Uhr</div>
                    <?php comment_text() ?>
                    <?php if ( $comment->comment_approved == '0' ) : ?>
                        <em class="comment-awaiting-moderation">Achtung: Dein Kommentar muss erst noch freigegeben werden.</em>
                        <br />
                    <?php endif; ?>
                    <div class="reply">
                        <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'xxx' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
                    </div><!-- .reply -->
                </div>
            <div style="clear:both"></div>
        </li>
</ol>

这是我的 CSS 代码

.commentlist{
    list-style:none;
    padding:0;
    margin:0;
    width:547px;
}
.comments{
    margin:0 0 15px;
    padding:0 0 15px;
    border-bottom:1px solid #333
}
    .commentAvatar{
        float:left;
    }
        .commentAvatar img{
            border:5px solid #339cdf; 
            border-radius:5px;
            max-width:75px;
            max-height:75px;
        }
    .comment{
        float:left;
        width:527px;
        padding:0 0 0 10px;
    }
    .commentmetadata{font-size:11px;}
    .commentmetadata a {font-size:18px; color:#f7941d; text-decoration:none}
    .commentlist ul.children{
        list-style:none;
        padding:0 0 0 35px;
        margin:0;
    }
        .commentlist ul.children li.comments .comment{
            float:left;
            width:492x;
            padding:0 0 0 10px;
        }
        .commentlist ul.children ul.children{
            list-style:none;
            padding:0 0 0 65px;
            margin:0;
        }

奇怪的是，ul.children ul.children for 确实有效，但 ul.children li.comments .comment 没有...

已激活嵌套评论区域 ;)

感谢您对此的任何帮助!

Answer 1

要为嵌套评论指定样式，您应该可以使用此选择器来完成:

.commentlist li li {}