子组合器在无序列表中设置父级<li>大写样式失效问题

我猜你遇到的情况是：你用 ul > li { text-transform: uppercase; } 想让最外层的父级列表项变成大写，但实际运行后，嵌套在里面的子列表项也跟着变成大写了——这是因为text-transform是继承属性，父元素的样式会自动传递给它的子元素，这就是你的样式没达到预期的核心原因。

为什么你的选择器没完全生效？ #

你的选择器 ul > li 确实只选中了最外层<ul>的直接子<li>，但这些父<li>里的所有子元素（包括内层的<ul>和<li>）都会继承text-transform: uppercase这个样式，所以原本想要小写的子列表项也被强制改成大写了。

两种修复方案 #

方案1：重置子列表项的样式

直接给内层的子<li>设置text-transform: none，覆盖继承来的样式：

/* 给最外层父li设置大写 */
ul > li {
  text-transform: uppercase;
}

/* 重置内层子li的文本转换，恢复默认 */
ul > li ul > li {
  text-transform: none;
}

方案2：给父li的文本单独包裹元素（更精准）

把父<li>里的文本用<span>包裹，只给这个<span>设置大写样式，这样就不会影响内部的子列表：

修改后的HTML：

<ul>
  <li><span>UPPERCASE</span></li>
  <li><span>UPPERCASE</span>
    <ul>
      <li>Lowercase</li>
      <li>Lowercase</li>
      <li>Lowercase</li>
      <li>Lowercase</li>
    </ul>
  </li>
  <li><span>UPPERCASE</span></li>
  <li><span>UPPERCASE</span></li>
</ul>

对应的CSS：

ul > li > span {
  text-transform: uppercase;
}

这个方案更稳妥，尤其是当你的列表结构后期可能变得更复杂时，能避免不必要的样式继承问题。

效果验证 #

用上面任意一种方案，最终的显示效果都会是：

• 最外层的4个父列表项文本保持大写
• 嵌套的4个子列表项文本保持小写，完全不受父元素样式的影响

内容的提问来源于stack exchange，提问作者Sam