2

好的，这听起来有点傻，我不知道这是css中的某种错误还是什么，但是当我尝试创建两级菜单时，第一级的项目将text-decoration属性设置为underline，我找不到在第二级的项目上将text-decoration设置为none的方法。

<ul>
<li style="text-decoration:underline;">item1 
    <ul>
        <li style="text-decoration:none;">subitem1</li>
        <li>subitem2</li>
    </ul>
</li>
</ul>

有谁知道这是为什么，我该如何解决？

4

2 回答 2

1

您可以将子项更改为

<li style="text-decoration:none !important;">subitem1</li>

那应该为你解决它。

然而滥用 !important 规则可能不是最好的方法。从长远来看，更好的策略是使用 CSS 文件并向li元素添加类属性。

就像是：

HTML

<ul>
<li class="main-item">item1 
    <ul>
        <li class="sub-item">subitem1</li>
        <li>subitem2</li>
    </ul>
</li>
</ul>

CSS

.main-item {
    text-decoration:underline;
}

.sub-item {
    text-decoration:none;
}
于 2013-06-28T00:47:37.097 回答
1

这很简单，首先要了解，如果您要给text-decoration:underline;第一级列表项，那么相同的 css 属性将为孩子申请，所以您可以做的是

.main-nav > li {text-decoration:underline;} -- 这样，css 将仅适用于第一级列表或父项。请注意，这不适用于其他子列表。

有了这个你不需要为子列表添加css

http://jsfiddle.net/qL3Bp/

于 2013-06-28T06:37:25.533 回答