CSS Nesting Selectors

В приведенном ниже коде я не понимаю, почему нам нужно поставить color:white в отдельный .marked p? Почему он не работает, если я делаю color:white в пределах marked? Может кто-нибудь объяснить? Спасибо заранее! :)CSS Nesting Selectors

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p 
{ 
color:blue; 
text-align:center; 
} 
.marked 
{ 
background-color:red; 
} 
.marked p 
{ 
color:white; 
} 
</style> 
</head> 

<body> 
<p>This paragraph has blue text, and is center aligned.</p> 
<div class="marked"> 
<p>This paragraph has not blue text.</p> 
</div> 
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p> 
</body> 
</html>

источник

2013-08-11 Spiderweb

Обратите внимание, что текст, который не находится в теге p, будет синим. Тот факт, что он находится внутри marked, не имеет значения.

источник

2013-08-11 20:33:48

Вам нужно сделать это, потому что селектор p имеет меньше Специфика чем .marked. Вот почему вам нужно использовать .marked p, чтобы изменить цвет.

Вы можете узнать о CSS специфичности здесь: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

источник

2013-08-11 20:33:56 Simone

Обычно дочерний элемент будет inherit цвета своего родителя.

Однако, в этом случае, вы специально добавили стиль цвета для всех <p> элементов:

p { color:blue; text-align:center; }

, который отменяет любые наследуемые стили, которые могут быть установлены в .marked для этого раздела разметки:

<div class="marked"> 
    <p>This paragraph has not blue text.</p> 
</div>

селектор:

.marked p {}

имеет более высокий specificity, чем элемент селектора p сам по себе и переопределяет его значение.

источник

2013-08-11 20:40:27 dc5

CSS Nesting Selectors

ответ

Смежные вопросы