CSS样式化'div'元素嵌套在其他元素的深处

Question

这是代码的样子：

我想要突出显示元素的边框，即<div class="Comment">...</div> ，如何使用CSS设置样式？

注意： 请注意名为“Comment”的类？ 它在突出显示的元素和它的父元素中都使用。 那么，这可能就是为什么这个有点棘手？

我尝试了下面的CSS代码和其他一些代码，但都没有。

.DataList .Item .comment, .DataList .Comment .comment,
.DataList .FirstComment .comment, .DataList .Mine .comment {
    border:1px solid #666;
    padding:10px;
    border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
}

.DataList .Item div.comment, .DataList .Comment div.comment,
.DataList .FirstComment div.comment, .DataList .Mine div.comment {
    border:1px solid #666;
    padding:10px;
    border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
}

我究竟做错了什么？ 希望有人能帮我解决这个小谜语。 谢谢。

Answer 1

首先，尝试不具有极端特异性的样式（添加父/元素选择器）。 这样，您可以使用.Comment - 请注意它们区分大小写。

如果样式被覆盖或者你有相同的名称但不同的“上下文”的选择（例如你有一个列表项.Comment和它的孩子用DIV .Comment ），当您使用更高的特异性（添加父/元素的选择器）就像div.Comment ， .Item .Comment