使用＆＃39;＆gt;＆＃39;有什么好处？ CSS中的选择器？

Question

这两个选择器：

.class>li>a{}

和

.class li a{}

我正在做同样的工作，所以有人可以告诉我使用>有什么好处？

由于

Answer 1

它使选择器更具体。

第一个选择器仅定位一个锚标记，该锚标记是作为CLASS子标记的第一项的子标记。

<div class="fo">
<li>
<a>

第二个选择将定位作为列表项后代的所有锚标记，该列表项是特定类的后代。

<div class="fo">
.....
<li>
.....
<a>

其中....可以是任何其他dom元素

Answer 2

使用选择器＆gt;你专注于直接的chidlrens

<div class="class">
  <ul>
     <li><a href="#">text</a></li>
  </ul>
</div>

使用这部分代码，选择器.class＆gt; li＆gt; a {}将无效，因为.class的子元素为“ul”。但.class li a {}将起作用，因为它会检查选择器树中的所有内容。

  <ul class="class">
     <li><a href="#">text</a></li>
  </ul>

将使用.class＆gt; li＆gt; a {}，因为他们都是直系孩子。

另一个例子，如果你有这个HTML代码

<div id="section">
  <span>some text</span>
  <div class="subSection">
    <span>some text</span>
  </div>
</div>

选择器#section＆gt; span仅适用于第一个范围。 选择器#section span将应用于id部分中的所有跨度。