css - 尽管使用直接后代选择器 ">"，但这些属性适用于子级

我正在使用.class > ul > li。

基本上，我想知道为什么有些属性可以按预期工作(例如border)，但是其他属性(例如text-transform，color或font-size)会影响列表中的列表。

这是一个示例: FIDDLE

我真的很讨厌使用.class ul li ul li来“撤消”我想要的第一个直接<li>子级上的文本样式的需要。

与文档的任何链接(使我能够了解此选择器的实际工作方式)都将受到极大的欢迎。

最佳答案

这是正常行为，称为继承。
一些css属性是从其父级继承而来的，而其他则不是。

遗产



继承的属性列表

azimuth             border-collapse    border-spacing        caption-side
color               cursor             direction             elevation
empty-cells         font-family        font-size             font-style
font-variant        font-weight        font                  letter-spacing
line-height         list-style-image   list-style-position   list-style-type
list-style          orphans            pitch-range           pitch
quotes              richness           speak-header          speak-numeral
speak-punctuation   speak              speech-rate           stress
text-align          text-indent        text-transform        visibility
voice-family        volume             white-space           widows
word-spacing

15年3月17日从w3.org提取
all属性

此属性允许使用initial | inherit | unset值控制CSS继承:



该属性当前的状态为“候选推荐”，但major modern borwsers( Safari 除外)已实现。

对于您的示例案例:
border属性不会继承，因此尽管父元素也不会使子元素具有border事件。

但是font-size，color和text-transform是继承到子元素的属性。因此，第二级列表项与其父级具有相同的font-size，color和text-transform。

结论:
您使用的选择器是正确的，并且仅以第一级列表项为目标，但是某些属性(例如color)将继承到第二级列表项。

关于css - 尽管使用直接后代选择器 ">"，但这些属性适用于子级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29080860/