父级 <ul> 覆盖其子元素的样式

Question

这是我的标记：

<div id="nav">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li>
            <a href="#">Articles</a>
            <ul class="inside-ul">
                <li><a href="#">Article 1</a></li>
                <li><a href="#">Article 2</a></li>
                <li><a href="#">Article 3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
    </ul>
</div>

我这样将样式应用于父级 <ul>：

#nav ul {
    something;
}

#nav ul li {
    something;
}

#nav ul li a {
    something;
}

我对子元素 <ul> 应用样式，如下所示：

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

但问题是，子元素<ul> (.inside-ul) 没有任何变化，就像它从父元素那里继承了所有东西。我已经尝试在我的CSS文件中使用!important，但它仍然保持不变。

这是发生情况的图像：

http://i47.tinypic.com/w1brkw.jpg

我希望我已经清楚地解释了自己，谢谢。

- Matt

Answer 1

更改

#nav ul {
    something;
}

为了

#nav > ul {
    something;
}

这样CSS样式只应用于#nav的子UL而不是子UL的子UL。

- Vian Esterhuizen

---

后代和子元素之间的区别... 请参阅 http://css.maxdesign.com.au/selectutorial/document_child.htm 和 http://css.maxdesign.com.au/selectutorial/document_descendant.htm 进行视觉比较。+1 - Michael Bray

子选择器在IE6中无效 - 如果您需要支持该浏览器。 - Emily

@michael 非常简单易懂的解释。我很喜欢。@matt 不客气。 - Vian Esterhuizen

我之前不知道在CSS中可以使用>!!! 我已经花了几个小时来尝试为列表（与帖子中的问题相同）设置样式 - 很高兴我找到了这个！谢谢！ - Losbear

Answer 2

将其更改为：

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

转换为：

#nav ul.inside-ul {
    something;
}

#nav ul.inside-ul li {
    something;
}

#nav ul.inside-ul li a {
    something;
}

更具体的规则（在这种情况下，适用于id (#nav)的规则优先于更简单的规则。

- Jimmy Shelter

Answer 3

这是一个CSS特异性问题。

id的值为100，而类的值为10，每个元素名称的值为1。

因此，#nav ul = 101，而.inside_ul = 10。

如果两个选择器应用于同一元素，则具有更高特异性的选择器将获胜。

因此，#nav ul样式将优先使用。您需要使用

#nav ul.inside_ul

具有111的特异性。

- Emily

Answer 4

你确定最重要的那些放在了最后面吗？在CSS文件中，.inside-ul应该放在#nav ul之后。

- Topher Fangio