我正在使用.class > ul > li
。
基本上我想知道为什么有些属性可以按预期工作(例如border
),但有些属性text-transform
,color
或font-size
会影响列表内部清单。
以下是一个示例: FIDDLE
我觉得非常讨厌使用.class ul li ul li
来“撤消”我想要的第一个直接<li>
孩子的文字样式。
任何能够让我了解这个选择器真正起作用的文档的链接都会受到极大的影响。
答案 0 :(得分:11)
这是正常行为,称为继承 某些css属性是从其父级继承的,而其他属性则不是。
如果没有在a上指定继承属性的值 element,该元素获取该属性的计算值 父元素。只有文档的根元素才能获得初始元素 财产摘要中给出的价值。 [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
于2015年3月17日从w3.org提取
all
属性此属性允许使用initial | inherit | unset
值控制 CSS 继承:
CSS all 简写属性重置所有属性,除了 unicode-bidi和direction,它们的初始值或继承值。 [MDN]
此属性目前的状态为&#34;候选推荐&#34;但是major modern borwsers(safari除外)已经实现了它。
border
属性不会继承,因此子元素虽然有父元素但不会有边界事件。
但font-size
,color
和text-transform
是继承到子元素的属性。因此,第二级列表项与其父级具有相同的font-size
,color
和text-transform
。
结论:
您使用的选择器是正确的,仅针对第一级列表项,但某些属性(如color
)将继承到第二级列表项。
答案 1 :(得分:1)
由于您没有为内部ul
定义样式,因此它的样式与其父样式相同。
您需要做的是将文本包装在范围
中<div class="menu ">
<ul>
<li><span>This is uppercase red</span>
<ul>
<li>this should not be uppercase or red</li>
<li>this should not be uppercase or red</li>
<li>this should not be uppercase or red</li>
</ul>
</li>
</ul>
</div>
将您的css定义应用于.menu>ul>li>span
答案 2 :(得分:0)
我认为你的HTML嵌套不正确,因此它将li里面的整个ul视为li的内容。试试这个:
<div class="menu ">
<ul>
<li>This is uppercase red</li>
<ul>
<li>this should not be uppercase or red</li>
<li>this should not be uppercase or red</li>
<li>this should not be uppercase or red</li>
</ul>
</ul>
</div>
答案 3 :(得分:0)
您定位的是.menu&gt; ul&gt; li。 它是正确的,但.menu&gt; ul&gt; li中有一个ul。
因此目标+孩子将受到财产的影响。
考虑这个HTML:
<body>
<h1>Example</h1>
<div class="sub">test</div>
</body>
这个CSS:
body
{
font-family:calibri;
}
这里,h1和div.sub都将采用calibri字体。