为什么在<p>标签内时,这个CSS选择器不适用于<li>

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>不能包含块级元素,如<ul>或<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; }