text_decoration属性在这段代码中不能正常工作

the text_decoration property is not working properly in this code

本文关键字:不能 工作 常工作 代码 decoration 属性 段代码 text      更新时间:2023-09-26

我想删除由#(锚标签)标签创建的下划线,为此目的,我使用了文本装饰属性,但它不会给我输出我需要的。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mango.css">
        <script>
            /* function mangoGrape(selector){
            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="block";
                })
             }*/
            function mangoGrape(selector){
             document.querySelectorAll('li')
                .forEach(function(node){
                    node.style.display="none";
                })
            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="block";
                })
         }

        </script>
    </head>
    <body>
        <div id="buttn">
            <ul id="main" onclick="mangoGrape('.apple')">main1
                <div id="pappaya">
                <li class="apple"> <a href="#">sub1</a></li>
                 <li class="apple"><a href="#">sub2</a></li>
                 <li class="apple"><a href="#">sub3</a></li>
                </div>
            </ul>
             <ul id="main" onclick="mangoGrape('.orang')">main2
                <div id="pappayas">
                 <a href="#"><li class="orang">sub21</li></a>
                 <a href="#"><li class="orang">sub22</li></a>
                 <a href="#"><li class="orang">sub23</li></a>
                </div>
            </ul>
        </div>
    </body>    
</html>
css:

#main li{
    list-style-type: none;
    display: none;
    text-decoration: none;
}
#main{
    cursor: pointer;
}
#pappaya {
    background-color:#339933;
     text-decoration: none;
    width: 100%;
    margin-left: -50%;
    padding-left: 50%;
}
 #pappayas {
        background-color:#339933;
      text-decoration: none; 
         width: 100%;
    margin-left: -50%;
    padding-left: 50%;
    }
.orang{
    text-decoration: none;
}
#pappaya li{
    text-decoration: none;
}
.apple{
        text-decoration: none;
    }
#buttn{
     /*margin-left: 94%;*/
    background-color: #023b3b;
        width: 10%;
        /*hyphens: 20%;*/
    height: 100%;
    color: white;
}

我想删除由#(锚标签)标签创建的下划线,为此目的,我使用了文本装饰属性,但它不会给我输出我需要的

none应用于anchor标签,而不是应用于其他标签:

li a {
    text-decoration: none;
}

试试这个

#pappaya li a{
text-decoration: none;

}