Question

我正在修改我的考试，在没有标记的情况下回答过去的一些问题，我对此感到困惑：

对于以下规则，请说明影响以及影响哪些元素：

p ul li {
   color:blue;
}

我在JSFiddle上写了一些html：http://jsfiddle.net/2nkmzgv2/

无论如何它在这里：

<p>
  <ul>
      <li>Should this be blue?</li>
  </ul>
</p>

所以文本没有任何反应，我会认为它会变成蓝色，但实际上没有任何意义发生，问题的目的是让你失望或者我的语法/方法在html中是错误的？

Answer 1

这是因为p元素中不允许使用ol / ul项目。

然后看起来像是一个技巧问题。很可能你会想要了解HTML规范，因为这个问题并不仅仅基于CSS知识。

您正在获得所描述的行为，因为<p> cannot contain block-level elements such as <ul> or <ol>。浏览器（例如Chrome）知道这是不可能的，因此通过将块元素放在两个段落之间来尝试处理您的非法结构：

因此，您为li声明的规则不适用。

p ul li {
  color: blue;
}

<p>
  Hello
  <ul>
    <li>I'm never blue.</li>
  </ul>
  Goodbye
</p>

其他技巧问题可能是：

a a { color:red }
p p { color:blue; }

Answer 2

这意味着CSS也永远不会应用于li元素。正确的CSS只是：

ul li {
    color: blue;
}

使用此HTML：

<ul>
    <li>Should this be blue?</li>
</ul>

Answer 3

“列表元素（特别是ol和ul元素）不能是p元素的子元素。当一个句子包含项目符号列表时。” HTML specification