为什么这里的b,c,d还有下划线，按照权值关系，下划线应该没有啦，字体颜色已经发生改变了呢

来源：3-35 层叠性和选择器权重计算

能量咕噜略略

2020-11-29 17:00:38

# 具体遇到的问题
关于text-decoration权值的一个问题，按照正常理解，下划线应该去掉了，我在text-decoration:none !important;也不行
# 报错信息的截图

# 相关课程内容截图

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

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

<!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>
        .first{
            text-decoration: underline;
            color:red;
        }
        .first ol li{
            text-decoration: none ;
            color:blue;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first">
            a
            <ol>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ol>
        </li>
        <li>e</li>
        <li>f</li>
    </ul>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示

写回答

1回答

好帮手慕鹤

2020-11-29

同学你好，text-decoration样式不能被子元素继承，.first ol li本身设置的text-decoration:none;是没有任何样式的；但是因为.first ol li是属于类名叫.first容器的一部分，first设置了下划线样式，所有子元素在显示的时候，是有下划线的样式；如果想要去掉.first ol li的下划线样式，只能是通过给.first设置text-decoration：none；来去掉。

可以对比color样式，color样式能够被继承，如下：