html - CSS "child"选择器的行为类似于 "descendant"选择器

Question

我正在尝试在非常基本的 html 演示中应用一些 CSS 样式以获得此结果。 (只有 Item 1.1 和 Item 1.2 为小写字母)

• 第 1 项
  • 元素 1.1
  • 元素 1.2
• 第 2 项
• 第 3 项

这些是 html 和 css 代码片段。

index.html

<ul id="list">
    <li>Item 1
          <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
          </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

样式.css

ul#list > li{
    text-transform: uppercase;
}

这给了我以下结果。

• 第 1 项
  • 元素 1.1
  • 元素 1.2
• 第 2 项
• 第 3 项

正如您所见，text-transform 属性已应用于每个 li 元素，即使 ITEM 1.1 和 ITEM 1.2 不是 ul#list

的直接子级

这看起来像是后代选择器的行为:

ul#list  li{
    text-transform: uppercase;
}

Answer 1

text-transform 是一个继承的属性。在 parent 身上指定它也会将它复制到 child 身上。很明显，只是因为您没有为子元素设置任何主要属性。所以默认情况下它将该属性作为主要属性，

ul#list > li{
文本转换:大写；
}

ul#list li {
  text-transform: none;
}

ul#list>li {
  text-transform: uppercase;
}

<ul id="list">
  <li>Item 1
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2
        <ul>
          <li>Item 1.1.1</li>
          <li>Item 1.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>