descendant selector

Question

Мое понятие css ниже следующее: будет соответствовать всем элементам img с атрибутом класса, который содержит значение «left» и потомок элемента p. Это верно?

p img.left { float: left; margin: 0.9em 0.9em 0.9em 0; padding: 0; } 

Answer 1

Да, это совершенно верно; ваш селектор будет match bothimg elements:

<p> 
    <img class="left" src="http://lorempixel.com/200/200/nightlife" /> 
    <span><img class="left" src="http://lorempixel.com/300/300/nature" /></span> 
</p> 

Вы могли бы, если вы хотите, чтобы выбрать только первый уровень img.left потомков p тега:

p > img.left { 
    /* CSS */ 
} 

JS Fiddle demo.

Это будет не соответствует img в пределах span.

Кроме того, вы могли бы соответствовать только img внутри span:

p span img, 
p span > img, 
span img, 
span > img { 
    /* CSS */ 
} 

JS Fiddle demo.

Ссылки:

• CSS Selectors, from the W3C.

Answer 2

Вы верны.

p img.left {} 

HTML:

<p> 
    <img class="left" /> * MATCHES THIS * 
    <img /> * NOT THIS * 
</p> 
<div> 
    <img class="left" /> * NOT THIS * 
    <img /> * NOT THIS * 
</div> 

<p> 
    <img class="left" /> * MATCHES THIS * 
    <img /> * NOT THIS * 
    <span> 
     <img class="left" /> * ALSO MATCHES THIS * 
     <img /> * NOT THIS * 
    </span> 
</p> 

С p > img.left {} он не будет соответствовать img внутри div Thats внутри p