直接后代选择器">"使用时会影响子元素的属性吗？

Question

直接后代选择器">"使用时会影响子元素的属性吗？

css

5

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

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

这是一个例子：FIDDLE 我发现需要使用.class ul li ul li来“撤消”我只想在第一个直接的<li>子项上使用的文本样式，这真的很烦人。

任何链接都可以让我学习这个选择器的工作原理，将不胜感激。

- Alvaro Menéndez

3

除了边框（border）之外，你正在使用的属性都是可以继承的。 - Adrift

这是一个解决方法：http://jsfiddle.net/ece2z0n2/1/ - Steve Wellens

4个回答

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

- Adam

1

span 元素是不必要的。 - James Donnelly

嗯...有必要回答这个问题（特别是OP觉得“撤销”之前的定义很烦人的部分）...但如果你能多说一些，不要犹豫;-) - Adam

0

我认为你的HTML嵌套不正确，因此它将整个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>

- Slaven Tomac

3

不，你把一个无序列表直接放在另一个无序列表下面，这是不正确的。 - Stickers

1

使用@sdcr，您不能直接将ul嵌套在另一个ul中。 ul元素只接受li元素作为子元素。 - Adam

@adam 也这么认为，但根据 W3C 的规定，这也是有效的。 - SCHTAILian

3

@SCHTAILian不这么认为，在MDN上写着“允许的内容是零个或多个<li>元素，最终可能与<ol>和<ul>元素混合。”我实际上在验证器上进行了测试，它说“元素ul在此上下文中不允许作为ul元素的子元素。” - Stickers

@sdcr，亚当确实在错误的地方寻找，是我的错。 - SCHTAILian

@SCHTAILian 没问题 :) 这只是一个非常有趣的话题，我已经很久没有看到了。 - Stickers

0

你的目标是 .menu>ul>li。这是正确的，但是在 .menu>ul>li 里面有一个 ul。

因此，目标和子元素都将受到该属性的影响。

考虑以下 HTML：

<body>
 <h1>Example</h1>
 <div class="sub">test</div>
</body>

还有这个 CSS：

   body
   {
    font-family:calibri;
   }

在这里，h1和div.sub都将使用Calibri字体。

- Adrien QUINT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

这是正常的行为，称之为继承。有些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提取，日期17/03/15

`all` 属性

该属性允许使用 initial | inherit | unset 值来控制 CSS 继承：

CSS 的 all 简写属性将除 unicode-bidi 和 direction 以外的所有属性重置为它们的初始值或继承值。[MDN]

该属性目前处于“候选推荐”状态，但是major modern borwsers（除 Safari 外）已经实现了它。

针对您的示例情况：

border属性不会继承，因此子元素即使父元素有边框也不会有边框。

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

结论：
您使用的选择器是正确的，仅针对第一级列表项，但某些属性如color会继承到第二级列表项。

直接后代选择器">"使用时会影响子元素的属性吗？

继承

可继承属性列表

all 属性

针对您的示例情况：

`all` 属性