因为CSS就是这样工作的。样式化元素中的元素将继承这些样式规则。所示的样式规则直接针对<ul>元素中的<li>元素，并且整个结构是“<li>元素”：

<li>List Item 3
  <ol>
    <li>List Item 3.1</li>
    <li>List Item 3.2</li>
    <li>List Item 3.2</li>
  </ol>
</li>

您可以单独针对<ol>元素并在那里应用样式规则，该规则将优先于继承的规则：

/* Direct Child Selector */
ul > li {
  color: gray;
}

ol {
  color: black;
}

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3
    <ol>
      <li>List Item 3.1</li>
      <li>List Item 3.2</li>
      <li>List Item 3.2</li>
    </ol>
  </li>
  <li>List Item 4</li>
</ul>

顺便说一句，打开浏览器的调试工具，看看DOM检查器。当在DOM中选择一个元素时，您可以观察到应用的各种样式规则。用户代理默认值、继承规则、特定目标规则等。当应用多个样式规则时，这将显示对于任何给定元素，哪些样式规则具有更高的优先级。