Question

我正在尝试在一个非常基本的html演示上应用一些CSS样式，以获得此结果。（仅Item 1.1和Item 1.2为小写字母）

第1项
- 项目1.1
- 条款1.2
ITEM 2
ITEM 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>

styles.css

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

哪个给我以下结果。

第1项
- ITEM 1.1
- ITEM 1.2
ITEM 2
ITEM 3

因此，您可以看到text-transform属性已应用于每个li元素，即使ITEM 1.1和ITEM 1.2不是ul#list的直接子元素< / p>

这似乎类似于后代选择器的行为：

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

Answer 1

text-transform是继承的属性。在父级上指定它还会将其复制到子级。显而易见，只是因为您没有为子元素设置任何主属性。因此，默认情况下，它将属性设为primary，

list(filter(lambda x:x%2==1, (1, 2, 4, 5, 6, 9, 10, 15))) # result: [1, 5, 9, 15]

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

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

Answer 2

这是因为您没有为<li>

指定任何NORMAL CSS

您可以通过 ul#list > li

li { text-transform: none; }

有关详情，请参阅此： https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

CSS“子”选择器的行为类似于“后代”选择器

2 个答案: