html - 如何在列表中使用 CSS 子选择器？

Question

我测试了以下代码，但不知道为什么相同的 HTML 结构在列表中不起作用。在带有 p 的 div 容器内一切正常。只有 .level1 类中的 p 得到 bold。但是 ul 中的相同结构不起作用。为什么 .level2 类中的 li 元素也是 bold？

<ul class="level1">
  <li>Level 1</li>
  <li>Level 1</li>
  <li>Level 1
    <ul class="level2">
      <li>Level 2</li>
      <li>Level 2</li>
      </ul>
  </li>
  <li>Level 1</li>
</ul>


<div class="level1">
  <p>Level 1</p>
  <p>Level 1</p>
  <p>Level 1
    <div class="level2">
      <p>Level 2</p>
      <p>Level 2</p>
    </div>
  </p>
  <p>Level 1</p>
</div>

.level1 > li {
 font-weight: bold;
}

.level1 > p {
  font-weight: bold;
}

Answer 1

<ul class="level1">
  <li>Level 1</li>
  <li>Level 1</li>
  <li>Level 1               // Started here because of this 
    <ul class="level2">     // class2 ul elements are considered as li of class1
      <li>Level 2</li>
      <li>Level 2</li>
      </ul>
  </li>                   
  <li>Level 1</li>
</ul>

而在这里，你的第二个问题，

I would like to add @defau1t answer :
In short, it is impossible toplace a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <p> element.

<div class="level1">
  <p>Level 1</p>
  <p>Level 1</p>
  <p>Level 1                 //P tag can't have div tag inside it.  
    <div class="level2">     //Hence it didn't worked
      <p>Level 2</p>
      <p>Level 2</p>
    </div>
  </p>
  <p>Level 1</p>
</div>