html - 当父级有文本装饰时摆脱嵌套的 li 文本装饰

Question

http://jsfiddle.net/Lqvcr/53/

这是非常基本的，我不知道如何使它工作。

当下拉列表锚没有下划线时，如何保持 .selected 类下划线？

的HTML：

<ul id="nav">
    <li>
        <a href="about.html">about</a>
    </li>
    <li>
        <a href="about.html">about</a>
    </li>
    <li class="selected">
        <a href="work.html">Work</a>
        <ul id="second" class="vis">
            <li>
                <a href="graphicdesign.html">Graphic Design</a>
            </li>
            <li>
                <a href="illustrations.html">Illustrations</a>
            </li>
        </ul>
    </li>
    <!-- etcetera -->

​CSS：

ul#nav {
    position: relative;
    margin-left: 0;
    padding-left: 0;
    display: inline;
}
ul#nav li {
    margin-left: 0;
    padding: 3px 15px;
    list-style: none;
    display: inline;
}
ul#nav li.first {
    margin-left: 0;
    border-left: none;
    list-style: none;
    display: inline;
}
ul#second {
    position: absolute;
    right: -57px;
    display: none;
}
.selected {
    text-decoration: underline;
}
.selected:hover ul#second {
    display: block;
}
.selected:hover ul#second li a {
    display: block;
}
a {
    text-decoration: none;
}

Answer 1

只需更改此行：

.selected a{text-decoration:underline;}

对于这个：

.selected > a{text-decoration:underline;}

Answer 2

如果您更具体地使用为所需链接加下划线的选择器，则可以更轻松地选择其中不希望加下划线的其他项目。我变了

.selected {text-decoration:underline;}

至：

.selected a {text-decoration:underline;}

另外，text-decoration: none;像这样添加：

.selected:hover ul#second li a {display:block; text-decoration: none;}

看到它在jsfiddle上工作

Answer 3

您必须为.selected选择器声明一个规则，并为较低级别的元素覆盖它。

由于.selected( text-decoration: underlined;) 所需的样式是用户代理的默认样式，因此我省略了一些text-decoration声明。剩下要做的就是为低级元素添加规则，以高特异性定义：

.selected:hover ul li a {
    text-decoration: none;
}

​这里是更新的 jsFiddle，用于演示。