Question

在这里遇到了一个大问题，导致我整整一天都死了......由于缺乏CSS技能，我无法自行修复它。我google了很多，做了很多试验+错误，但没有成功......

我正在构建我的第一个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确实有用，但是ul.children li.comments .comment没有......

激活嵌套注释区域;）

感谢您提供任何帮助！

Answer 1

要为嵌套注释指定样式，您应该可以使用此选择器执行此操作：

.commentlist li li {}

Answer 2

如果要覆盖wordpress的默认样式，可以在Css中尝试。

.anyclass

{
    color:#F00 !important;
}

尝试在任何类

中实现此功能

！important将覆盖之前定义的所有Css样式

或者你可以试试这个

找到您要更改的标签附近的课程

例如。

你好

所以你也可以这样改变

.main span

{
   color:#F00 !important;
}

希望它可以解决您的问题

如何在Wordpress中指定正确方式的嵌套注释？

2 个答案: