我的嵌套< li>是从它的父类继承样式 [英] My nested <li> is inheriting the styles from its parent

问题描述

我的顶级样式< li> 看起来像标签。并且在滚动时显示div，但如果有嵌套< ul> < li> 的中的 b
$ b

是我的风格：

  #menu li a {
 font-家庭：Arial，Helvetica，sans-serif; 
 font-size：13px; 
 color：#ffffff; 
 display：block; 
 outline：0; 
 text-decoration：none; 
 padding：10px 9px 2px 9px; 
 / *背景颜色和渐变* / 
 
 background：＃da0000; 
 background：-moz-linear-gradient（top，＃b80202，＃da0000）; 
 background：-webkit-gradient（线性，0％0％，0％100％，从（＃b80202）到（＃da0000））; 
 
 / *圆角* / 
 
 -moz-border-radius：5px 5px 0px 0px; 
 -webkit-border-radius：5px 5px 0px 0px; 
 border-radius：5px 5px 0px 0px; 
} 
  

这是我的HTML

 < li> 
< a href =＃>总部< / a> 
< div class =dropdown_2columns> 
< div class =col_2> 
< ul> 
< li>< a href =board.php>板< / a>< / li> 
< li>< a href =＃>职员< / a>< / li& 
< / ul> 
< / div> 
< / div> 
< / li> 
  

我想添加一个类到顶层< li> code>会帮助，但没有运气。有没有什么我缺少？当上面的代码运行Board和Staff都对它们有一个红色的tab效果。

解决方案

类到顶层< li> 将无法工作 - 因为内部< a> 仍然受到影响：

  #menu li.myclass a 
  

也就是说，它们是< li> 您可以将规则更改为：

  #menu> li> a 
  

...含义，只有< a> 是< li> 的直接子元素，它们是 #menu ，会受到影响（IE6不支持这个）。 这是假设您的< ul> 具有ID菜单。

或者您可以使用（主要用于IE6兼容性）：

  #menu li li a 
 {
 / *您应用于#menu li a * / 
的撤消样式
  

在这里，你必须重置/撤消/覆盖之前在 #menu li a 上设置的所有样式，您不想应用于内部锚点。

IE6的一个替代方法 - 你不需要重置/撤消样式 - 是在< a> '，而不是< li> 的：

  #menu li a.tab 
  

I am styling my top level <li> to look like tabs. and on rollover a div shows but if there are nested <ul> <li>'s in the div they inherit the same tab style as the top level <li>'s

below is my style:

#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;
}

This is my HTML

<li>
    <a href="#">Headquarters</a>
    <div class="dropdown_2columns">
        <div class="col_2">
            <ul>
                <li><a href="board.php">Board</a></li>
                <li><a href="#">Staff</a></li>
            </ul>
        </div>
    </div>
</li>

I thought adding a class to the top level <li> would help but no luck. Is there something I am missing? when the code above runs "Board" and "Staff" both have a red tab effect on them.

解决方案

Well, adding a class to the top level <li> won't work - because the inner <a>'s will still be affected by:

#menu li.myclass a

I.e., they're anchor elements inside a <li> with class "myclass".

Instead, you can change the rule to:

#menu > li > a

... meaning, only <a>'s that are immediate children of <li>'s, which are immediate children of #menu, will be affected (IE6 doesn't support this). This is assuming it's your <ul> that has the id "menu".

Or you could use (mostly for IE6 compatibility):

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

Note that in this, you'll have to reset/undo/"overwrite" all the styles previously set on #menu li a that you don't want to apply to the inner anchors.

An alternative for IE6 - where you won't need to reset/undo styles - is to set a class on the <a>'s rather than the <li>'s:

#menu li a.tab

这篇关于我的嵌套< li>是从它的父类继承样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！