html – 我的嵌套>从其父级继承样式

概述我正在设计我的顶级< li>看起来像标签.并且在翻转时显示div但是如果有嵌套的< ul> < li>在div中他们继承了与顶级< li>相同的标签样式 以下是我的风格： #menu li a { font-family:Arial, Helvetica, sans-serif; font-size:13px; color: #ffffff; display:bl 我正在设计我的顶级< li>看起来像标签.并且在翻转时显示div但是如果有嵌套的< ul> < li>在div中他们继承了与顶级< li>相同的标签样式

以下是我的风格：

#menu li a {    Font-family:Arial,Helvetica,sans-serif;    Font-size:13px;     color: #ffffff;    display:block;    outline:0;    text-decoration:none;    padding:10px 9px 2px 9px;    /* Background color and gradIEnts */    background: #da0000;    background: -moz-linear-gradIEnt(top,#b80202,#da0000);    background: -webkit-gradIEnt(linear,0% 0%,0% 100%,from(#b80202),to(#da0000));    /* Rounded corners */    -moz-border-radius: 5px 5px 0px 0px;    -webkit-border-radius: 5px 5px 0px 0px;    border-radius: 5px 5px 0px 0px;}

这是我的HTML

<li>    <a href="#">headquarters</a>    <div >        <div >            <ul>                <li><a href="board.PHP">Board</a></li>                <li><a href="#">Staff</a></li>            </ul>        </div>    </div></li>

我想在顶层添加一个课程< li>会有所帮助,但没有运气.有什么我想念的吗？当上面的代码运行“Board”和“Staff”时,它们都有一个红色标签效果.

解决方法 好吧,将一个类添加到顶级< li>将无法工作 – 因为内部< a>仍然会受到以下因素的影响：

#menu li.myclass a

即,它们是< li>内的锚元素.与班级“myclass”.

相反,您可以将规则更改为：

#menu > li > a

……意思是,只有< a>的< li>的直接子节点是#menu的直接子节点,才会受到影响(ie6不支持此功能).这假设它是你的< ul>它有ID“菜单”.

或者您可以使用(主要用于ie6兼容性)：

#menu li li a{    /* Undo styles you applIEd to #menu li a */}

请注意,在此,您必须重置/撤消/“覆盖”之前在#menu li上设置的所有样式,您不想将其应用于内部锚点.

ie6的另一种选择 – 你不需要重置/撤消样式 – 是在< a>而不是< li>上设置一个类：

#menu li a.tab

总结

以上是内存溢出为你收集整理的html – 我的嵌套>从其父级继承样式全部内容，希望文章能够帮你解决html – 我的嵌套>从其父级继承样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。