Question

我面临一个非常奇怪的问题。据我所知，CSS“＆gt;”而选择器是它基本上只将样式应用于直接子项。但我根本无法将这些样式应用于元素。奇怪的是，在检查元素时，我可以看到firebug中的其他CSS部分，但我看不到“＆gt;”应用的样式。

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;
}

正常情况下应用所有其他样式，但使用“＆gt;”的样式块选择器根本没有被识别。所以假设我检查li元素，我可以看到应用了以下样式：

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

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

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

即使它是ul的直接孩子。以前有人遇到过这个问题吗？可能导致这种情况的原因是什么？

Answer 1

嘿，我已将“display：block”替换为“display：none”，并且该样式适用于firefox。问题在于线高，你想要做什么作为最终设计？尝试更改填充或边距，您想要更少的空间。

如果那不是问题，你可以给我们一个你想要的最终结果的例子吗？

Answer 2

假设您提供的HTML示例是您尝试应用这些样式的完整代码，我看不出如何发生任何冲突以保证使用直接后代选择器（＆gt;）

只需使用子选择器即可。

/* 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;
}

HTML＆amp; CSS：“＆gt;”大于未应用的选择器样式

2 个答案: