CSS列表样式

Question

我正在使用YUI reset / base，重置后它将ul和li标签设置为list-style：disc outside;

我的标记看起来像这样：

<div id="nav">
     <ul class="links">
         <li><a href="">Testing</a></li>
     </ul>

</div>

我的CSS是：

#nav {}
#nav ul li {
    list-style: none;
 }

现在，每个李旁边的小光盘都会消失。

为什么这不起作用？

 #nav {}
 #nav ul.links 
 {
      list-style: none;
 }

如果我删除了base.css文件的链接，它有效吗？

更新：sidenav - ＆gt; NAV

Answer 1

我认为丹与他的回答很接近，但这不是一个特殊问题。 您可以在列表中设置列表样式（UL），但您也可以覆盖单个列表项（LI）的列表样式。

您告诉浏览器不要在列表中使用项目符号，但YUI告诉浏览器在单个列表项上使用它们（YUI获胜）：

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links {
    list-style: none; /* doesn't override styles for LIs, just the UL */
}

您想要的是告诉浏览器不要在列表项上使用它们：

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links li {
    list-style: none;
}

Answer 2

在第一个片段中，您将list-style应用于li元素，将第二个应用于ul元素。

尝试

#nav ul.links li
{
  list-style: none;
}

Answer 3

由于CSS specificity，后一个例子可能不起作用。 （可以找到更严肃的解释here。）也就是说，YUI的base.css规则是：

ul li{ list-style: disc outside; }

这比你的更“具体”，所以正在使用YUI规则。如前所述，您可以定位li代码，使规则更具针对性：

#nav ul li{ list-style: none; }

如果不查看您的代码，很难说肯定，但如果您不了解特异性，那么肯定值得一读。

Answer 4

不应该是：

#nav ul.links

Answer 5

也许样式是base.css用“！important”覆盖你的样式？您是否尝试为此特定的li添加一个类并为其创建自己的样式？

Answer 6

使用这个：

.nav ul li {
    list-style: none;
}

或

.links li {
    list-style: none;
}

它应该有用......