text_decoration 属性在此代码中无法正常工作答案

【问题标题】：the text_decoration property is not working properly in this codetext_decoration 属性在此代码中无法正常工作
【发布时间】：2016-08-17 11:08:40
【问题描述】：

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

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

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

【问题讨论】：

您的 HTML 无效，div 不能是 ul 的子级。
另外，像main1 这样的普通文本节点不能是<ul> 元素的子元素，只有<li> 元素可以是<ul> 的子元素。

标签： javascript html css anchor text-decorations

【解决方案1】：

将none 应用于anchor 标签而不是其他标签：

li a {
    text-decoration: none;
}

【讨论】：

【解决方案2】：

试试这个

#pappaya li a{
text-decoration: none;

}

【讨论】：