从 <ul> 中删除项目符号？ [复制]

Question

我有一个非常简单的 html 结构，如下所示：

<ul id="menu" ng-show="showMenu">
  <li><a href="http://www.google.com" target="_blank">a</a></li>
  <li><a href="http://www.msn.com" target="_blank">b</a></li>
</ul>

css:

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  background:#f2f2f0;
  padding:15px;
}
#menu ul{
    list-style:none !important;
}
#menu li a{
    color:inherit;
    text-decoration:none;
}

即使我将list-style 设置为无，ul 仍会显示项目符号。当我删除#menu 时，它会按需要工作。为什么会这样？ #menu 是ul 的id，它应该应用于菜单元素。我做错了什么吗？

Answer 1

#menu ul 正在尝试定位 ul，它是 #menu 的后代。这是不正确的，因为在您的情况下它们是相同的元素。 ul#menu 是正确的。

Answer 2

您正在定位一个不存在的元素（<ul>，它是 id="menu" 元素的子元素。您要定位的元素是 <li>，它是 id="menu" 元素的子元素像这样：

#menu li{
    list-style:none; //you can remove !important
}

另一种选择是创建一个菜单类no-bullet。

<ul id="menu" class="no-bullet" ng-show="showMenu"> 并使用与上述相同的 CSS，除了将 #menu li 替换为 .no-bullet。