Html 如何在不影响子列表的情况下调整有序列表中的项目？_Html_Css_List

Html 如何在不影响子列表的情况下调整有序列表中的项目？

html css list

Html 如何在不影响子列表的情况下调整有序列表中的项目？,html,css,list,Html,Css,List,我想定义一个带有无序子列表的有序列表。你可以从下面的例子中看到我想要实现的目标。这取决于这样一个事实：无序列表也会获得编号标签。我如何防止这种情况（对于进一步的子列表[如3、4级，…]） /*%%%有序列表，请参阅http://stackoverflow.com/questions/2558358/how-to-add-brackets-a-to-ordered-list-compatible-in-all-browsers# %%% */ 保险商实验室{ 列表样式类型：方形；填充：0em

我想定义一个带有无序子列表的有序列表。你可以从下面的例子中看到我想要实现的目标。这取决于这样一个事实：无序列表也会获得编号标签。我如何防止这种情况（对于进一步的子列表[如3、4级，…]）


/*%%%有序列表，请参阅http://stackoverflow.com/questions/2558358/how-to-add-brackets-a-to-ordered-list-compatible-in-all-browsers# %%% */
保险商实验室{
列表样式类型：方形；
填充：0em 0em 0em 26px；/*从左缩进*/
}
ulli{
边距：0.3em 0em 0em 0em；/*元素之间的间距*/
}
ol{
列表样式类型：无；
填充：0em；/*从左缩进*/
}
ol.orderedlist{
计数器复位：mycounter；
列表样式类型：无；
}
ol.orderedlist li:之前{
内容：计数器（mycounter）“）”；
计数器增量：mycounter；
}
第1点

福
酒吧

第2点

福
酒吧

使用子选择器：

ol.orderedlist>li:之前{
内容：计数器（mycounter）“）”；
计数器增量：mycounter；
}

使用子选择器：

ol.orderedlist>li:之前{
内容：计数器（mycounter）“）”；
计数器增量：mycounter；
}

旁注：确保将

中。e、 g.

text。
，而不是text。
您也应该正确缩进标记。旁注：确保将元素嵌套在它们是其后代的中。e、 g.text。
，而不是text。
您也应该正确缩进标签。非常感谢，这很快。非常感谢，这很快。
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      /* %%% ordered lists, see http://stackoverflow.com/questions/2558358/how-to-add-brackets-a-to-ordered-list-compatible-in-all-browsers# %%% */
      ul {
      list-style-type: square;
      padding: 0em 0em 0em 26px; /* indent from left */
      }

      ul li {
      margin: 0.3em 0em 0em 0em; /* space between elements */
      }

      ol {
      list-style-type: none;
      padding: 0em; /* indent from left */
      }

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

      ol.orderedlist li:before {
      content: counter(mycounter) ") ";
      counter-increment:mycounter;
      }
    </style>
  </head>
  <body>
    <ol class="orderedlist">
      <li>Point 1</li>
      <ul>
    <li>Foo</li>
    <li>Bar</li>
      </ul>
      <li>Point 2</li>
      <ul>
    <li>Foo</li>
    <li>Bar</li>
      </ul>
    </ol>
  </body>
</html>

ol.orderedlist ul {list-style: square;}

ol ul {list-style: square;}

ol ul ol ul {list-style: square;}