HTML & CSS: ">" 大于未应用的选择器样式答案

【问题标题】：HTML & CSS: ">" Greater than selector styles not appliedHTML & CSS: ">" 大于未应用的选择器样式
【发布时间】：2012-10-03 05:41:45
【问题描述】：

我面临一个非常奇怪的问题。根据我对 CSS ">" 的理解，选择器基本上只将样式应用于直接子代。但我根本无法将样式应用于元素。奇怪的是，在检查元素时，我可以看到 firebug 中的其他 CSS 部分，但我看不到应用的“>”样式。

我拥有的 HTML 是：

<div id="navigation">
    <ul>
       <li><a href="#">First</a></li>
       <li><a href="#">Second</a></li>
       <li><a href="#">Third</a></li>
       <li><a href="#">Fourth</a></li>
    </ul>
</div>

CSS 部分是这样的：

/* Navigation */
#navigation {
    min-height:45px;
}

#navigation ul {
    list-style-type: none;
    margin: 0px 45px 0px 0px;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #F3F3F3;
}

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
}

#navigation > ul > li {
    line-height: 26px;
    display: block;
}

#navigation > ul > li > a {
    border-right: 1px solid #F3F3F3;
    color: #333;
    display: block;
    font-family: 'Trebuchet MS';
    font-size: 15px;
    padding: 10px 18px 13px;
    position: relative;
    text-decoration: none;
    z-index: 1000;
}

#navigation > ul > li.current_page_item > a, 
#navigation > ul > li.current_page_parent > a, 
#navigation > ul > li.current_page_ancestor > a {
    border-top: 3px solid #72AC4B;
    color: #72AC4B;
    font-family: 'Trebuchet MS';
    margin-top: -3px;
}

所有其他样式都照常应用，但使用“>”选择器的样式块根本无法识别。所以假设如果我检查li 元素，我可以看到应用了以下样式：

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
}

但我看不到应用了以下样式：

#navigation > ul > li {
    line-height: 26px;
    display: block;
}

即使它是 ul 的直接子代。有没有人遇到过这个问题？这可能是什么原因造成的？

【问题讨论】：

我已经用 chrome 和 firefox 对此进行了测试，我已经在页面顶部添加了<!DOCTYPE html>。
你用的是什么浏览器？你的 css 很好，它可以在我尝试过的浏览器中运行。
做了一个fiddle。按预期工作。
您是否尝试过清除浏览器缓存？ Control-shift-delete/Command-shift/删除
@MBozic 感谢您的回复，我试过这是 Chrome 和 Firefox，但两种浏览器都存在同样的问题，顺便说一句，这是一个 wordpress 主题。

标签： html css css-selectors

【解决方案1】：

假设您提供的 HTML 示例是您尝试将这些样式应用到的完整代码段，我看不出为什么会发生任何冲突以保证使用直接后代选择器 (>)。

只需使用子选择器即可。

/* Navigation */  
#navigation {
    min-height:45px;
}

#navigation ul {
    list-style-type: none;
    margin: 0px 45px 0px 0px;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #F3F3F3;
}

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
    line-height: 26px;
    display: block;
}

#navigation ul li a {
    border-right: 1px solid #F3F3F3;
    color: #333;
    display: block;
    font-family: 'Trebuchet MS';
    font-size: 15px;
    padding: 10px 18px 13px;
    position: relative;
    text-decoration: none;
    z-index: 1000;
}

#navigation ul li.current_page_item a, 
#navigation ul li.current_page_parent a, 
#navigation ul li.current_page_ancestor a {
    border-top: 3px solid #72AC4B;
    color: #72AC4B;
    font-family: 'Trebuchet MS';
    margin-top: -3px;
}

【讨论】：

不，> 是子选择器。 “直系后代”只是它的另一个名称；他们都是同一个意思。空格是后代选择器。
抱歉，术语弄混了，但重点仍然存在。
谢谢@Nw167。虽然我发现我正在处理的 cms 实际上是用 div 元素包装 ul ，所以 ul 不再是父 div 的直接子元素，这就是不应用样式的原因。

【解决方案2】：

嘿，我已将“显示：块”替换为“显示：无”，并且该样式确实适用于 Firefox。问题是关于行高，你想实现什么作为最终设计？尝试更改您想要更少空间的填充或边距。

如果这不是问题，你能不能给我们一个你正在寻求的最终结果的例子？？

【讨论】：

因为@maenu 已经做了一个小提琴并且效果很好我不认为这与样式部分有关，这里是链接jsfiddle.net/UR4XB