虽然使用直接后代选择器">"但适用于儿童的属性

Question

我在用.class > ul > li.

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

这是一个例子:FIDDLE

我发现真的很烦人,需要使用.class ul li ul li"撤消"我想要的第一个直接<li>孩子的文本样式.

任何能够让我了解这个选择器如何真正起作用的文档链接都会受到极大的影响.

Answer 1

这是被称为继承的正常行为.
某些css属性是从其父级继承的,而其他属性则不是.

遗产

如果未在元素上指定继承属性的值,则该元素将在其父元素上获取该属性的计算值.只有文档的根元素才能获得属性摘要中给出的初始值.[ MDN ]

继承属性列表

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

摘自w3.org于2015年3月17日

该all物业

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

CSS all速记属性将除了unicode-bidi和direction之外的所有属性重置为其初始值或继承值.[ MDN ]

这个属性目前具有"候选推荐"的状态,但主要的现代borwsers(safari除外)已经实现了它.

对于您的示例案例:

该border属性不会继承,因此子元素不会有父元素的边界事件.

但是font-size,color和text-transform是继承的子元素的属性.因此,第二级列表项具有相同的font-size,color以及text-transform它的父级.

结论:
您使用的选择器是正确的,仅针对第一级列表项,但某些属性color继承到第二级列表项.