Как я могу установить CSS для класса в классе?

Question

С этим HTML-кодом.

<div class="noote">
    <p class="first admonition-title">Noote</p>
    <p class="last">Let's noote.</p>
</div>

Как я могу установить цвет Noote, чтобы быть красным с css?Я имею в виду, как я могу установить что-то для (div class = "noote") и (p class = "first") под ним с помощью css?

Answer 1

Попробуйте это:

/*this will apply for the element with class first 
inside the element with class noot */

.noote .first{    
    color:red;
}

/* If you wanted to apply a rule for both individually
you can do: */

.noote, .first{    
    border:1px solid red;
}

Answer 2

@ Амосривера получил.

Стоит отметить, что селекторы-потомки требуют больше ресурсов процессора. Я всегда использую более конкретные правила, где это возможно. Так что вместо

.noote .first{
    backgorund:red;
}

Вы могли бы сказать

.noote > .first{
    backgorund:red;
}

Номинальная разница в большинстве случаев, но все же хорошая привычка.

Действительно

Потомки селекторы неэффективно ... Чем менее конкретно ключ, тем больше количество узлов что нужно оценить.

- Google "Давайте сделаем Интернет быстрее "документы

И

Селекторы потомков являются основными медленными до браузера Safari

- Джон Сайкс, май 2008

Некоторые тесты производительности показывают незначительное влияние , и большинство авторов согласны с тем, что это имеет значение только для очень больших документов.

Но в основном я просто следую своему инстинкту программиста - скажи, что ты имеешь в виду, и не более.

Answer 3

div.note{
   ...
}

Относится к элементу div, который имеет примечание класса.

p.first{
    ...
}

Относится к элементу p, который имеет класс первым.

div.note p.first{
    ...
}

Относится к pэлемент внутри заметки, который имеет класс первым.

Кроме того, если вы хотите установить дочерний элемент, не устанавливая для него класс,

div.note p:first-child{
    /* it refers to the first p that contains noote */
}