css – 父母重写其孩子的样式

<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

我希望我已经清楚地解释了自己,谢谢.

#nav ul {
    something;
}

至

#nav > ul {
    something;
}

这样,CSS仅应用于#nav的子UL而不是子UL.