Question

我已经了解到，如果我在CSS中引用<li>或<ul>内的<ol>我应该使用ol > li或{{1但是，一旦我忘记在ol和li之间放置标志，我发现它仍在工作。这样做的正确方法是什么？

Answer 1

是的，它有效，因为它“选择由”父“”

指定的元素“child”指定的所有直接子元素

像

<ul>
<li></li>
</ul>

but not
<ul>
<li>
   <ol>
      <li></li>
   </ol>
</li>
</ul>

当你使用ul＆gt; li选择器，它只会在ex.2上获得一个直接的子li元素，如果使用ul li那么你将得到两个li元素 - 所有的孩子li元素ul

Answer 2

他们不等同！想象一下像

这样的结构

<ul>
  <li id="A"> </li>
  <li id="B">
     <ol>
        <li id="C"> </li>
      </ol>
   </li>
</ul>

比 ul li表示此示例A，B和C中的所有<li>，而ul > li仅表示<ul>的直接子项，因此A和B而不是C

Answer 3

它们实际上是等效的，因为<li>必须是<ol>或<ul>的孩子。

child selector组合子>，只是意味着x > y中规则右侧的元素必须是元素上的元素（不仅仅是后代）。剩下。由于列表必须如此，因此您的规则是等效的，并且可以使用。请注意，就CSS specificity而言，组合子没有效果。

Answer 4

当您使用ul li时，li内的任何ul都会占用...这意味着，如果您拥有此示例，请使用此HTML：

<ul>
  <li>one</li>
  <li>
    <ol>
      <li>one again</li>
    </ol>
  </li>
</ul>

它将应用于li和ul内的ol。

但是，如果您使用ul > li，它将仅应用于示例中的第一个li，因为它是ul的直接子项。