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.Comment, .Item .Comment