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

Question

这是代码的外观：

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

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

我尝试了下面的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），那就是你使用的时候更高的特异性（在选择器中添加父/元素），如div.Comment，.Item .Comment