Question

使用此语法的重点是什么

div.card > div.name

这个

有什么区别

div.card div.name

Answer 1

A > B只会选择B作为A的直接子项（也就是说，中间没有其他元素）。

A B将选择A中的任何B，即使它们之间还有其他元素。

Answer 2

>是child selector.它只指定直接的子元素，而不是任何后代（包括孙子，曾孙等），如第二个示例中没有>。

IE 6及更低版本不支持子选择器。一个很好的兼容性表是here。

Answer 3

div.card > div.name匹配<div class='card'>....<div class='name'>xxx</div>...</div> 但它与<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

不匹配

div.card div.name与两者都匹配。

也就是说，>选择器确保右侧的所选元素 >是左侧元素的一个子女。

没有>的语法匹配<div class='name'>的后代（不仅仅是孩子）的任何<div class='card'>。

Answer 4

> vs空间

考虑div > span { }和div span { }的两种情况

在这里，<space>选择<span>元素的所有所有<div>元素，即使它们在另一个元素中也是如此。 >选择<div>元素的所有子元素，但是如果它们在另一个元素中。

>（大于）：

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>

这只选择了<span>World!</span>，而不会在<span>标签内寻找<p>。

空格

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>

即使所有span标签都嵌套在另一个标签中，它也会选择所有span标签。

Answer 5

A>如果B是A的直系子代，则选择B；而无论B是否是B的直系子代，A选择B。

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

'＆gt;'之间有什么区别？ CSS选择器中的空格？

5 个答案:

> vs空间

>（大于）：

空格