Question

我有一个简单的无序列表，我正在尝试设置所有父<li>项的样式，使它们为大写。

ul > li {
  text-transform: uppercase;
}

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

上面的方法是由this article建议的，但它似乎不起作用。我做错了什么？

Answer 1

每个li的格式都是ul的孩子......这些全部。此外，text-transform的默认值为inherit，因此后代无论如何都会从父级中获取uppercase值。

您需要编写一个唯一匹配最外层子节点的子节点的选择器，并将默认值更改为不同的节点。

例如：

＆＃13;

li { 
  text-transform: none;
}
:not(li) > ul > li {
  text-transform: uppercase;
}

＆＃13;

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

＆＃13;

Answer 2

要达到预期效果，请使用以下选项

ul＆gt; li将选择ul的所有li元素，其中包括小写的li元素

li＆gt; ul＆gt; li将选择li元素下的所有ul元素并应用initial以保留初始样式

ul > li {
  text-transform: uppercase;
}

li > ul > li{
  text-transform: initial;
}

代码示例 - https://codepen.io/nagasai/pen/VXpvWG
运行代码段进行测试

＆＃13;

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

＆＃13;

<!-- begin snippet: js hide: false console: true babel: false -->

    <ul>
      <li>UPPERCASE</li>
      <li>UPPERCASE
        <ul>
          <li>Lowercase</li>
          <li>Lowercase</li>
          <li>Lowercase</li>
          <li>Lowercase</li>
        </ul>
      </li>
      <li>UPPERCASE</li>
      <li>UPPERCASE</li>
    </ul>

＆＃13;

儿童组合器不工作无序列表

2 个答案: