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

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

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 specificity问题。

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

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

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

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

#nav ul.inside_ul

具有111的特异性。

Answer 4

你确定最重要的是最后一个吗？ .inside-ul应位于CSS文件中的#nav ul之后。

父<ul>覆盖其子样式</ul>

4 个答案: