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

时间:2015-03-16 15:35:53

标签: css

我正在使用.class > ul > li

基本上我想知道为什么有些属性可以按预期工作(例如border),但有些属性text-transformcolorfont-size会影响列表内部清单。

以下是一个示例: FIDDLE

我觉得非常讨厌使用.class ul li ul li来“撤消”我想要的第一个直接<li>孩子的文字样式。

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

4 个答案:

答案 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-sizecolortext-transform是继承到子元素的属性。因此,第二级列表项与其父级具有相同的font-sizecolortext-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字体。