CSS 列表 ID 覆盖默认值

Question

在我的 main.css 文件中，我为特定列表 ID (expList) 定义了样式：

#listContainer{
  margin-top:15px;
}
#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}
#expList .collapsed {
    background-image: url(../images/collapsed.png);
}
#expList .expanded {
background-image: url(../images/expanded.png);
}

这很好用，然后我可以用自定义项目符号 (.png) 调用我的 expandable/collapsible 列表，如下所示：

<div id="listContainer">
  <ul id="expList">
    <li>First item
      <ul>
        <li>Item hidden in the collapsed list
etc.

虽然我认为 #expList ul, li 只会影响具有此自定义 ID 的列表项，但它似乎覆盖了默认样式，特别是 list-style: none 属性阻止我使用默认样式numbered/bullet 列表。

我该如何解决这个问题？

Answer 1

Although I thought #expList ul, li would only affect list items with this custom ID,

正在考虑

#expList ul, li

请注意，您有一个 , 后跟 li，这意味着所有 li 标签，无论是哪个 ID 或 class（在这种情况下）都不会在您的代码中设置样式..所以行为符合预期

尝试

#expList li{
 list-style-type:none 
}

以上将仅应用无样式类型来列出在 ID 为 #expList

的 ul 标签中找到的标签

CSS 列表 ID 覆盖默认值

CSS list ID overriding default

html

css

custom-lists

html-lists