html - 仅在父级而不是子级上应用列表样式类型

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 类和他的 child 是 a,b,c 没有 (1), (2)

Answer 1

您根本没有以父 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 的任何其他样式。