CSS Div, классы и охватывает

Question

Может кто-то пожалуйста expalin мне эти два селекторы, я не могу получить мою голову вокруг него

div.card div 

div.card div span 

Answer 1

Посмотрите на http://www.w3schools.com/cssref/css_selectors.asp

WHI tespace в селекторе означает «потомок», поэтому div.card div означает «Div, являющийся потомком (например, ребенок, внук, правнук) div с классом card». div.card div span означает «span, который является потомком div, который является потомком div с классом card».

Учитывая HTML:

<div id="d1" class="foo"> 
    <div id="d2" class="card"> 
    <span id="s1"></span> 
    <div id="d3" class="bar"></div> 
    <div id="d4" class="bar"> 
     <div id="d5"><span id="s2"></span></div> 
    </div> 
    </div> 
</div> 

Селектор div.card div будет соответствовать дивы с идентификаторами d3, d4 и d5. Обратите внимание, что он не соответствует самому card (id d2).

Селектор div.card div span будет соответствовать диапазону с идентификатором s2, но НЕ s1. Пробел s1 не спускается из div, который является дочерним элементом div.card, поэтому он не будет соответствовать.

Answer 2

div.card дел - все Div внутри DIV с классом card

div.card диапазон дел - все SPAN внутри DIV внутри DIV с классом card

Answer 3

Читайте справа налево: первым является «div внутри (div с классом« card »)». Второй - «span внутри div внутри (div с классом« card »)».

Answer 4

В HTML-то вроде этого:

div.card ДИВ

<div class="card"> 
    <div></div> 
</div> 

div.card пядь ДИВ

<div class="card"> 
    <div> 
     <span></span> 
    </div> 
</div>