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

Question

This is how the code looks:

And I want to a border for the highlighted element, ie <div class="Comment">...</div> , how do I style it using CSS?

NOTE: Notice the class named 'Comment'? It is used in both the highlighted element and it's parent element. So, that's probably why this one's a bit tricky?

I tried the CSS codes below, and some others, and none worked.

.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;
}

What am I doing wrong? Hope someone can help me solve this small riddle. Thanks.

Answer 1

first, try NOT styling with extreme specificity (adding parent/element selectors). this way, you can just use .Comment - note that they ARE case sensitive.

if styles are overridden or you have selectors of the same name but different "context" (like you have a list item with .Comment and it's child with div with .Comment ), that's when you use higher specificity (adding the parent/element in the selector) like div.Comment , .Item .Comment