从<ul>？</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;
}

即使我将ul设置为无，list-style仍会显示项目符号。当我删除#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。