css - 家长覆盖其子样式

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）根本没有改变，就像它继承了父母的一切。我已经尝试!important在我的 CSS 文件中使用，但它仍然保持不变。

这是正在发生的事情的图像：

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

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

Answer 1

改变

#nav ul {
    something;
}

到

#nav > ul {
    something;
}

这样，CSS 仅应用于#nav 的子 UL 而不是子 UL。

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) 的规则优先于更简单的规则。

Answer 3

这是一个CSS 特异性问题。

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

所以#nav ul= 101 而.inside_ul= 10

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

所以#nav ul 样式将优先。您将需要使用

#nav ul.inside_ul

其特异性为 111。

Answer 4

你确定最重要的东西排在最后吗？.inside-ul应该#nav ul在 CSS 文件中的之后。