html - 二级菜单，设置text-decoration属性

Question

好吧，这听起来有点傻，我不知道这是否是 css 中的某种错误或什么，但是当我尝试创建两级菜单，其中第一级的元素有文本装饰时属性设置为下划线，我找不到将第二个元素上的text-decoration设置为none的方法等级。

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

有谁知道这是为什么以及如何解决它？

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