Question

ul＆gt; 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＆gt; li应该选择ul的所有li子元素（比如class = test I created），但它不适用于ul＆gt;李。

Answer 1

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

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

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

Answer 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>

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

这里，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>

为什么选择ul＆gt; li（选择器）不起作用

3 个答案: