从<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是的id ul,它应该适用于menu元素.我做错了什么吗？

Answer 1

#menu ul试图瞄准ul一个后代#menu.这是不正确的,因为在您的情况下,它们是相同的元素.ul#menu会是对的.

Answer 2

您正在定位一个不存在的元素（a<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.