Question

有人可以向我解释这两个选择器，我无法理解它

div.card div

div.card div span

Answer 1

div.card div - 所有div在div中，类card

div.card div span - 所有跨越div的内部div与类card

Answer 2

查看http://www.w3schools.com/cssref/css_selectors.asp

选择器中的空格意味着“后代”，因此div.card div表示“一个div，它是一个具有card类的div的后代（例如，子，孙，曾孙） ”。 div.card div span表示“作为div的后代的跨度，它是具有类card的div的后代。”

鉴于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会匹配ID为d3，d4和d5的div。请注意，它与card div（id d2）本身不匹配。

选择器div.card div span会匹配标识为s2的范围，但不匹配s1。 s1范围不会来自div.card的子级div，因此不会匹配。

Answer 3

从右到左阅读：第一个是“div inside（div with class'card'）”。第二个是“跨越div里面（div与类'卡'）”。

Answer 4

在HTML中就像这样：

div.card div

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

div.card div span

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

CSS Div，类和跨度

4 个答案: