Css：如何为 html 子列表应用相同的列表样式类型的项目符号？答案

【问题标题】：Css: How to apply the same list-style-type bullets for html sub-lists?Css：如何为 html 子列表应用相同的列表样式类型的项目符号？
【发布时间】：2019-07-28 15:57:40
【问题描述】：

我的html代码是：

<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" type="text/css" href="general.css">
      <link rel="stylesheet" type="text/css" href="common/basicDataTypes/list.css">
   </head>
   <body>
      <div class="title"> title bar</div>
      <p>option 1 -</p>
      <ul class="ul-ident">
         <li>
            <p>test1:</p>
            <ul class="ul-ident">
               <li>
                  <p>subtest1</p>
               </li>
               <li>
                  <p>subtest2</p>
               </li>
               <li>
                  <p>subtest3</p>
               </li>
               <li>
                  <p>subtest4</p>
               </li>
            </ul>
         </li>
         <li>
            <p>test2</p>
         </li>
         <li>
            <p>test3</p>
         </li>
         <li>
            <p>test4</p>
         </li>
         <li>
            <p>test5</p>
         </li>
      </ul>
      <p>option 2 - </p>
      <ul class="ul-ident">
         <li>
            <p>test1</p>
         </li>
         <li>
            <p>test2</p>
         </li>
      </ul>
      <hr>
   </body>
</html>

我的 CSS 样式是：

.title {
    text-align: center;
    font-weight: bold;
    border-style: solid;

.ul-ident {
    padding-left: 25px;
}


hr {
    width: 90%;
    border: none;
    height: 3px;
    /* Set the hr color */
    color: green; /* old IE */
    background-color: green; /* Modern Browsers */
}

我需要所有的项目符号都是圆盘样式，但主列表项是圆盘项目符号，子列表项目是圆形项目符号

我读到“默认情况下，列表项将标有项目符号（黑色小圆圈）”（来源：w3schools）

在当前结果截图下方：

我尝试了 IE 和 chrome，两者都给出了相同的结果。

我的问题：如何使所有项目符号在同一个列表样式类型中？

【问题讨论】：

标签： css html-lists

【解决方案1】：

ul ul {
    list-style-type: disc;
}

<ul class="ul-ident">
         <li>
            <p>test1:</p>
            <ul class="ul-ident">
               <li>
                  <p>subtest1</p>
               </li>
               <li>
                  <p>subtest2</p>
               </li>
               <li>
                  <p>subtest3</p>
               </li>
               <li>
                  <p>subtest4</p>
               </li>
            </ul>
         </li>
         <li>
            <p>test2</p>
         </li>
         <li>
            <p>test3</p>
         </li>
         <li>
            <p>test4</p>
         </li>
         <li>
            <p>test5</p>
         </li>
      </ul>
      <p>option 2 - </p>
      <ul class="ul-ident">
         <li>
            <p>test1</p>
         </li>
         <li>
            <p>test2</p>
         </li>
      </ul>

让我们深入挖掘一下，想知道如何找出要应用样式的specificity？最简单的方法是使用开发者工具。然后标记你感兴趣的元素。然后你会在图片右侧看到“用户代理样式表”

在ul ul 正下方，您会看到它覆盖了包含您要查找的样式的ul。

评论后更新： 您可以使用 CSS inherit 来使用从父元素到子元素定义的样式。请参阅此示例，我添加了另一个嵌套级别。所以第一级定义为circle，第二级定义为square，所有下一个级别将inheritsquare因为sqaure是定义的父级..

ul {
    list-style-type: circle;
}

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

ul ul ul {
    list-style-type: inherit;
}

<ul>
    <li>circle
        <ul>
            <li>square
                <ul>
                    <li>inherit
                        <ul>
                            <li>inherit</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

【讨论】：

我想知道您如何定义所有子列表都将具有与主列表相同的样式，不一定是光盘样式
如果是默认值，为什么要设置list-style-type: disc？为什么根据我的源代码浏览器更改了最突出的子列表？
disc 值只是一个示例。您可以根据需要/需要设置它。浏览器只显示您所做的事情。如果您应用了我发布的没有类的示例，它显然会更改您选择的所有元素 = ul ul in CSS is a selector
知道了。但我很想知道为什么即使列表的默认样式应该是光盘：1. 我应该明确定义它 2. 在这个子列表中，浏览器显示不同的样式
@C.Mar 每个浏览器都有一个默认定义的样式表see this answer for more details 如果你不喜欢它，你可以使用CSS reset（如果你用谷歌你会找到很多）但是如果你使用CSS 重置确保添加您想要的样式为每个元素您刚刚使用 CSS 重置删除了默认样式！这意味着边距、body 的填充、p、ul li 等等......

【解决方案2】：

您可以设置list-style-type: none; 并使用li:before 并应用样式来创建“点”

.title {
  text-align: center;
  font-weight: bold;
  border-style: solid;
}

.ul-ident {
  padding-left: 25px;
  list-style-type: none;
}

.ul-ident li {
  position: relative;
}

.ul-ident li:before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background: black;
  top: 6.5px;
  left: -11px;
  border-radius: 50%;
}

hr {
  width: 90%;
  border: none;
  height: 3px;
  /* Set the hr color */
  color: green;
  /* old IE */
  background-color: green;
  /* Modern Browsers */
}

<div class="title"> title bar</div>
<p>option 1 -</p>
<ul class="ul-ident">
  <li>
    <p>test1:</p>
    <ul class="ul-ident">
      <li>
        <p>subtest1</p>
      </li>
      <li>
        <p>subtest2</p>
      </li>
      <li>
        <p>subtest3</p>
      </li>
      <li>
        <p>subtest4</p>
      </li>
    </ul>
  </li>
  <li>
    <p>test2</p>
  </li>
  <li>
    <p>test3</p>
  </li>
  <li>
    <p>test4</p>
  </li>
  <li>
    <p>test5</p>
  </li>
</ul>
<p>option 2 - </p>
<ul class="ul-ident">
  <li>
    <p>test1</p>
  </li>
  <li>
    <p>test2</p>
  </li>
</ul>
<hr>

【讨论】：