我的嵌套< li>是从它的父类继承样式 [英] My nested <li> is inheriting the styles from its parent
问题描述
我的顶级样式 是我的风格: 这是我的HTML 我想添加一个类到顶层 类到顶层 也就是说,它们是 ...含义,只有 或者您可以使用(主要用于IE6兼容性): 在这里,你必须重置/撤消/覆盖之前在 IE6的一个替代方法 - 你不需要重置/撤消样式 - 是在 I am styling my top level below is my style: This is my HTML I thought adding a class to the top level Well, adding a class to the top level I.e., they're anchor elements inside a Instead, you can change the rule to: ... meaning, only Or you could use (mostly for IE6 compatibility): Note that in this, you'll have to reset/undo/"overwrite" all the styles previously set on An alternative for IE6 - where you won't need to reset/undo styles - is to set a class on the
这篇关于我的嵌套< li>是从它的父类继承样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!< 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;
}
< 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菜单。
#menu li li a
{
/ *您应用于#menu li a * /
的撤消样式
#menu li a
上设置的所有样式,您不想应用于内部锚点。
< a>
',而不是< li>
的:
#menu li a.tab
<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#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;
}
<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>
<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.<li>
won't work - because the inner <a>
's will still be affected by:#menu li.myclass a
<li>
with class "myclass".#menu > li > a
<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".#menu li li a
{
/* Undo styles you applied to #menu li a */
}
#menu li a
that you don't want to apply to the inner anchors.<a>
's rather than the <li>
's:#menu li a.tab