关于text-decoration的继承性的问题

来源：3-1 相对定位

ZcKing

2020-12-12 14:24:41

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

老师您好，我有个问题：我尝试一下text-开头的继承性，我在nav ul 或者 nav ul li 中设置了 text-decoration: none; 之前的课程有说text-开头有继承性，而a也是在nav标签内（a在祖先标签内）。按正常来说下划线应该消失，但是显示情况是没有消失；我又尝试将其放在nav ul li 中就生效了，我想知道原因。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        /* nav盒子总宽度是962px，总高度是42px */
        nav {
            width: 960px;
            height: 40px;
            border: 1px solid #000;
            margin: 40px auto;
        }

        nav ul {
            list-style: none;
            color: red;
            text-decoration: none; /*无效*/
        }

        nav ul li {
            float: left;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
  text-decoration: none; /*无效*/
}

nav ul li a {
text-decoration: none; /*有效*/
}
    </style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </nav>
</body>

</html>
输入代码，可通过选择【代码语言】突出显示