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.

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...