CSS Div，类和跨度

Question

Can some one please expalin to me these two selectors, I cant get my head around it

div.card div

div.card div span

Answer 1

div.card div - all div's inside div with class card

div.card div span - all span's inside div's inside div with class card

Answer 2

Look at http://www.w3schools.com/cssref/css_selectors.asp

Whitespace in a selector means "descendant of", so div.card div means "A div that is a descendant (eg, child, grandchild, great-grandchild) of a div with a class of card ". div.card div span means "a span that is a descendant of a div that is a descendant of a div with class card ."

Given the 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>

The selector div.card div would match the divs with IDs d3 , d4 , and d5 . Note that it doesn't match the card div (id d2 ) itself.

The selector div.card div span would match the span with id s2 , but NOT s1 . The s1 span does not descend from a div that is a child of div.card , so it wouldn't match.

Answer 3

Read from the right to the left: the first one is "div inside (div with class 'card')". The second one is "span inside div inside (div with class 'card')".

Answer 4

In HTML something like this:

div.card div

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

div.card div span

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