2

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

<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;
}
4

3 回答 3

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

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

我想添加@defau1t 答案：
简而言之，不可能将<div>元素放在<p>DOM 中的 a 内，因为开始<div>标签会自动关闭<p>元素。

<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>
于 2013-08-10T11:50:41.723 回答
0

如此处所述，您在元素中包含<div>元素的<p>示例无效。W3C 也在这里指定：

P 元素代表一个段落。它不能包含块级元素（包括 P 本身）。

由于<div>元素是块级元素，因此不能将它们放在<p>元素内。所以......永远不要再这样做了。

关于你的问题。您的<li>项目示例根据规范完美运行。您的选择器.level1 > li正确选择了 li 元素，但是，这些<li>Level 2</li>元素只是继承了该font-weight属性。您必须添加一个 CSS 规则

.level2 > li {
    font-weight:initial;
}

或将其设置为另一个值，如果你愿意的话。

于 2015-04-07T10:42:04.333 回答
0

使用您的代码，您将 ul 中的所有 li 标记与 .level1包括 ul 的 li 的类一起标记.level2，要解决此问题，只需重新定位 ul 的 li.level2并返回font-weight : 400 //or normal，请参见：http:
//jsfiddle.net/ rsm23/s3CmF/

希望我帮助了你

于 2013-08-11T00:51:28.807 回答