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）调用我的可扩展/可折叠列表，如下所示：

<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属性阻止我使用默认的编号/项目符号列表。< / p>

我该如何解决这个问题？

Answer 1

虽然我认为#expList是ul，但li只会影响具有此自定义ID的列表项

考虑

#expList ul, li

请注意，您有,后跟li，这意味着所有li代码都不会在您的代码中设置样式，无论哪个ID或类（在本例中）都没有样式。所以行为是预期的

试

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

以上内容不会将任何样式类型应用于ul标记中的ID #expList

列表标记

CSS列表ID覆盖默认值

1 个答案: