为什么 ul > li （选择器）不起作用答案

【问题标题】：Why ul > li (selector) doesn't work为什么 ul > li （选择器）不起作用
【发布时间】：2017-05-06 17:07:25
【问题描述】：

ul > li（选择器）不起作用。我在这里错过了什么？

/* Part 1 */
ul > li{
  margin-top:30px;
}

/* Part 2 */
/* ul .test{
  margin-top:30px;
} */

<ul>
<li class="test">item1</li>
<ul>
  <li>subitem1</li>
  <li>subitem2</li>
</ul>
<li class="test">item2</li>
<li class="test">item3</li>
</ul>

https://jsfiddle.net/gy5r3noh/
CSS 中的第 1 部分和第 2 部分不应该相等吗？但事实并非如此。 ul > li 应该选择 ul 的所有 li 孩子（比如 class=我创建的测试），但 ul > li 不起作用。

【问题讨论】：

您的 HTML 无效。 <ul> 不能是 <ul> 的子代
怎么不工作了？它为每个 li 应用 30px 的边距，因为每个 li 都是其父 ul 的子级。没有？
不相等。第二个仅针对具有类“test”的元素

标签： html css css-selectors html-lists

【解决方案1】：

忽略您的 HTML 无效 as j08691 has pointed out 的事实，并假设您的内部 ul 旨在包装在 li 元素中：

ul > li 选择任何 li 元素，它是任何 ul 元素的子元素。
ul .test 选择任何 ul 元素中包含“test”类的任何元素。

一个和两个在您的 HTML 结构中给出不同的结果，因为您嵌套的 ul 不包含具有“测试”类的 li 元素。示例一适用于外部和内部ul 元素，而示例二仅影响具有“测试”类的li 元素（嵌套的ul 中没有）。

【讨论】：

【解决方案2】：

您的 HTML 无效，ul 不能将 ul 作为直接子级

ul > .test {
  margin-top: 30px
}

<ul>
  <li class="test">item1
    <ul>
      <li>subitem1</li>
      <li>subitem2</li>
    </ul>
  </li>

  <li class="test">item2</li>
  <li class="test">item3</li>
</ul>

【讨论】：

不过，这并没有改变。

【解决方案3】：

/* Part 1 */
ul > li{
  margin-top:30px;
}

/* Part 2 */
/* ul .test{
  margin-top:30px;
} */

<ul>
<li class="test">item1</li>
<ul>
  <li>subitem1</li>
  <li>subitem2</li>
</ul>
<li class="test">item2</li>
<li class="test">item3</li>
</ul>

这里，Html应该是这样的，

<ul>
<li class="test">item1
  <ul>
    <li>subitem1</li>
    <li>subitem2</li>
   </ul>
</li>
<li class="test">item2</li>
<li class="test">item3</li>
</ul>

【讨论】：

这与这个答案有何不同：stackoverflow.com/a/43663028/578411
一样，没什么不同。我刚刚创建了 Html 结构，
没有添加任何新内容的答案是没有意义的。我们希望（新）答案能够增加价值，而不是重复已有的答案。
是的，我知道，我会尝试教育您一点如何改进。开放征求意见是一个很好的起点；）享受您在 Stack Overflow 上的逗留。如果您需要额外的指导，请记住我们有一个help center