Как установить 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

div.note{ 
    ... 
} 

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

p.first{ 
    ... 
} 

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

div.note p.first{ 
    ... 
} 

Относится к элементу p внутри примечания, которое имеет класс в первую очередь.

Кроме того, если вы хотите установить элемент ребенка без установки класса к нему,

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

Answer 2

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

/*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 3

@ amosrivera получил его.

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

.noote .first{ 
    backgorund:red; 
} 

Можно сказать, что

.noote > .first{ 
    backgorund:red; 
} 

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

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

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

— Google "Let's make the web faster" docs

И

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

— John Sykes, May 2008

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

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