仅在父级而不是子级上应用list-style-type

Question

我有一个有序列表，其中包含list-style-type属性的特定值，我希望它不会影响其子项。

目前，有序列表中嵌套了另一个有序列表，它继承了list-style-type值。我怎么能禁用它？

 <ol class='custom-ol'>
  <li> cat1:
    <ol style="list-style-type:lower-alpha">
     <li>text 1</li>
     <li>text2</li>
     </ol>
  </li>
  <li>
    cat2:
     <ol style="list-style-type:lower-alpha">
     <li>text 3</li>
     <li>text 4</li>
     </ol>
  </li>

css风格

    <style>
   .custom-ol ol
    {
        counter-reset: custom-counter;
        list-style-type: none;
    }
    .custom-ol ol li 
    {
          counter-increment: custom-counter;
    }

    .custom-ol ol li:before 
    {
          content:"(" counter(custom-counter) ") ";
          font-weight:bold;
   }

</style>

我试图修复这种方式，但它根本不起作用（更新版本）

这就是我得到的

ol.custom-ol
{
    counter-reset: custom-counter;
    list-style-type: none;
}
ol.custom-ol li 
{
      counter-increment: custom-counter;
}

ol.custom-ol li:before 
{
      content:"(" counter(custom-counter) ") ";
      font-weight:bold;
}

ol ol {
    list-style-type: lower-alpha;
}

我想要父母（现在，1位于<1>， .custom-ol 类 和他的孩子一样，他们是a，b，c，没有（1），（2）

Answer 1

这就是你的CSS应该是这样的：

ol.custom-ol
{
    counter-reset: custom-counter;
    list-style-type: none;
}
ol.custom-ol li 
{
      counter-increment: custom-counter;
}

ol.custom-ol li:before 
{
      content:"(" counter(custom-counter) ") ";
      font-weight:bold;
}

ol ol {
    list-style-type: lower-alpha;
}

ol ol li:before {
    content: "";
}

Answer 2

您根本没有定位到您的父ol，而是将儿童ol元素定位两次。一旦通过内联样式：

style="list-style-type:lower-alpha"

并通过CSS文件：

.custom-ol ol
    {
        counter-reset: custom-counter;
        list-style-type: none;
    }

如果您要在子元素上停用list-style-type: none，请将.custom-ol ol更改为.custom-ol。这将仅定位您的父ol。

或者，尝试将!important添加到style="list-style-type:lower-alpha"，如下所示：

style="list-style-type: lower-alpha !important"

这将覆盖应用于子ol的任何其他样式。