清单样式

“清单”对于网页排版而言，是个“可控制但又不太好控制”的元素，由于清单本身具有的默认样式，如果要符合自己的网页样式需求，就必须透过 list-style、list-style-type、list-style-image、list-style-position 这几个可以调整清单面貌的样式属性修改样式，这篇教学会介绍这些样式属性的用法。

快速导览：

• 清单元素默认样式
• list-style-type 清单标记类型
  • 套用巢状清单
  • 自订标记
• list-style-image 清单图片标记
• list-style-position 清单标记位置
• list-style 清单样式

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

清单元素默认样式

网页清单元素有三种，分别是“无序清单 ul、li、有序清单 ol、li、自订清单 dl、dt、dd”，这些清单元素具有“默认的样式”，使用时可以适度透过 CSS 修改样式 ( 例如外边界或内边距 )，下方是 ul、li 的默认样式。

ul {
  display: block;
  list-style-type: disc;
  /* list-style-type: decimal; */ /* ol 預設值 */
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}

list-style-type 清单标记类型

list-style-type 样式属性可以设定清单标记的类型，具有继承特性，是 list-item 显示类型元素专属的样式，通常会将样式撰写在 ul 元素上，透过继承的方式到让 li 元素具有样式特性 ( 有时也会直接套用在 li 元素 )，撰写方式如下：

ul {
  list-style-type: 標記類型名稱;
}
ul li {
  list-style-type: 標記類型名稱;
}

W3C 提供非常多种的标记，只要输入标记名称就会产生对应的标记样式，标记默认值为 disc 实心圆点，如果设定为 none 表示不显示标记，下方列出完整的标记类型。

清单标记类型展示：https://codepen.io/oxxo/pen/NWZEaQQ

• 符号：disc、circle、square、disclosure-open、disclosure-closed。

  

• 数字：decimal、decimal-leading-zero、lower-roman、upper-roman。

  

• 英文字母：lower-greek、lower-alpha、lower-latin、upper-alpha、upper-latin。

  

• 繁简中文数字：cjk-decimal、cjk-ideographic、cjk-heavenly-stem、cjk-earthly-branch、trad-chinese-formal、trad-chinese-informal、simp-chinese-informal、simp-chinese-formal。

  

• 日韩数字：korean-hangul-formal、korean-hanja-formal、korean-hanja-informal、japanese-formal、japanese-informal、hiragana、hiragana-iroha、katakana、katakana-iroha。

  

• 其他：devanagari、ethiopic-numeric、lao、lower-armenian、malayalam、mongolian、myanmar、oriya、persian、tamil、kannada、arabic-indic、armenian、bengali、cambodian、khmer、telugu、thai、tibetan、hebrew、georgian、gujarati、gurmukhi、upper-armenian。

  

list-style-type 套用巢状清单

在巢状清单的状态下，如果使用的是“默认标记类型”会按照“disc > circle > square”的顺序标记，当标记到 square 之后就会一直用 square 延续下去。

线上展示：https://codepen.io/oxxo/pen/JjQemZW

<!-- HTML 程式碼 -->
<div>
  <ul>
    <li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul>
        <li>red</li><li>orange</li>
        <li>yellow
          <ul>
            <li>pen</li><li>pencil</li>
            <li>paper
              <ul>
                <li>Javascript</li><li>HTML</li><li>CSS</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
</style>

如果套用了其他的标记样式，就会按照设定的标记样式名称套用，但需要特别注意，由于 ul 元素本身具有样式，若要套用到巢状结构“深层”的清单，继承的权重无法覆盖元素本身样式，需要额外撰写选择器，透过权重的方式覆盖样式 ( 参考CSS 选择器的优先级 ( 权重 ) )，下方范例展示三种修改标记名称的方式。

线上展示：https://codepen.io/oxxo/pen/dyBQgKV

<!-- HTML 程式碼 -->
<div>
  <ul class="a"><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<div>
  <ul class="b"><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<div>
  <ul class="c"><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {list-style-type: upper-roman;}         /* 單純希望樣式會繼承 */
  .b, .b ul {list-style-type: upper-roman;}  /* 額外用選擇器 */
  .c li {list-style-type: upper-roman;}      /* 套用到 li */
</style>

list-style-type 自订标记

除了使用这些清单标记名称，只要将标记名称换成自订的“符号或文字”，就能使用“自订的”符号或文字作为标记，下方会将巢状清单的每一层都套用不同的自订符号 ( 更多特殊符号：特殊符号、特殊字元、特殊文字 )

线上展示：https://codepen.io/oxxo/pen/WNqYayW

<!-- HTML 程式碼 -->
<div>
  <ul><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  ul {list-style-type: '>>> ';}
  ul ul {list-style-type: '♥ ';}
  ul ul ul { list-style-type: '㊖ ';}
  ul ul ul ul {list-style-type: '★ ';}
</style>

list-style-image 清单图片标记

除了使用标记名称和自订标记，也可以运用 list-style-image 样式属性，让“图片”也可以作为清单标记，这个样式属性默认值为 none，具有继承特性，使用 CSS 的 url() 函数加载图像，由于无法透过 CSS 控制加载的图片尺寸，因此需要注意如果加载“尺寸过大的图片”，会造成清单被撑开的状况，清单标记的图片类型支援“外部图片、base64 编码图片、SVG 编码图片、渐层色”，由于渐层色无法指定大小，会根据浏览器的设定填满固定的小方框下方范例会展示这四种图片标记效果。

除了 list-style-image，也可以利用虚拟元素 ::marker 设定图片标记，参考：::marker。

线上展示：https://codepen.io/oxxo/pen/KKjrGeO

<!-- HTML 程式碼 -->
<div>
  <ul class="a">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="b">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="c">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="d">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {
    list-style-image: url(https://cdn-icons-png.freepik.com/16/11694/11694600.png);
  }
  .b {
    list-style-image: url(data:image/png;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMuaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0OCA3OS4xNjQwMzYsIDIwMTkvMDgvMTMtMDE6MDY6NTcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNGQjhBQUY5NjM1OTExRUY5NEVGOEFGRjIzQTQ0QTkxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNGQjhBQUZBNjM1OTExRUY5NEVGOEFGRjIzQTQ0QTkxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0ZCOEFBRjc2MzU5MTFFRjk0RUY4QUZGMjNBNDRBOTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0ZCOEFBRjg2MzU5MTFFRjk0RUY4QUZGMjNBNDRBOTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAcABgDAREAAhEBAxEB/8QAhQABAQEBAAAAAAAAAAAAAAAABwYFCAEBAQEBAQAAAAAAAAAAAAAABgUEAwcQAAAEBAMFBQkAAAAAAAAAAAECAwQREhMFACEGMWEiFBVBgUJyB1GRobEyYiMzNBEAAQEGAwcFAQAAAAAAAAAAAQIAETESAwQhUQVBYXGBIjIT8KHR4UPx/9oADAMBAAIRAxEAPwDpq+3hrZrS5uTmIpNyTSBtMYcilDeYwwxwuK6aSCswDabO1VXqpppipjHRetbpeNdIHujkSorEVI1alGVEhxCJQAvaMoCERzwesL9dW5E5wILhsZhquk06FkRTTiCHnaQy7hOwZhf1D1i4eOrxYlAHl0XSPKiEOGiEFCm8xhiGCmp3xWV0jAKDuUW9A0TS00006w7ikv5waRUYXW2I2+5iUUAdRWYrAOf4jBxbs8w3YlmmumErhNiOTXE1qVYrpxlwUOLL1t9QUnzjTJCmAFroCxHyAeA5CygPeoXh3YUUtTCzSzW944fbBa+immmuTCnLKc3/AFHe0ZqfRzt36jK24DUSXUx3LdcwRLCmJj+45YYlXdipd2UQnxfy+Wv6fqiUWAqRNNySOeHs1rfNKOLt6ftWKrendregQUEgEB/KiWQxAEMoKAHyxWubM1bUJI60jDiPlj9nqSaN8pYL6S1F53HF/JorQWl3aevxbqwOWzGMd0qX6Z5ZSFAfMb4YkadaKF04/nFkOs6gk2Mw/WHDb63sr3npNZhzn9lcOmyftqw4pPtkjPHKG3CavI9M3c/pzf8AyLCbXyuXJ2S9WTt/OG17aC9WipR/bKMmzb2bcsdlPdg2VDnh8Gx9J9D5Jfpc1WsfqNb+jmY8dePij3ezLGWz8cpkz6s37/XBt+peaceWEold2y7Jd3vni3//2Q==);
  }
  .c {
    list-style-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20" viewBox="0 0 34.5 43.8" style="enable-background:new 0 0 34.5 43.8;" xml:space="preserve"><g><path class="st0" style="fill:%23FE5918;" d="M7.8,37.2c0.1,1.9,0.8,3.6,2.1,5c0.1,0.2,0.5,0.3,0.3,0.6C10,43,9.8,42.6,9.6,42.5c-2.9-1.8-5.3-4.1-7-7c-1.4-2.4-2.2-5-2.5-7.7c-0.5-4.6,0.3-8.9,2.4-13c0.1-0.2,0.1-0.5,0.4-0.4c0.2,0,0.2,0.3,0.3,0.5c0.6,2.1,1.7,3.9,3.2,5.4c0.1,0.1,0.1,0.3,0.3,0.3c0.2,0,0.2-0.2,0.2-0.3c0.1-0.6-0.1-1.1-0.3-1.6c-0.2-0.6-0.1-1.1-0.1-1.7c0.1-1.2,0-2.3,0.3-3.4c0.5-2.1,1.4-4,2.5-5.8c2.3-3.6,5.5-5.9,9.4-7.2c0.4-0.1,0.7-0.3,1.1-0.3c0.2,0,0.6-0.1,0.4,0.3c-0.8,1.5-0.6,3.1-0.6,4.7c0,3,1.4,5.6,2.8,8.1c1.5,2.7,3.1,5.3,4.5,8.1c0.5,1,0.7,2.1,1,3.1c0.1,0.3,0.1,0.6,0.3,0.8c2.5-3.3,3.4-7.1,2.8-11.2c0.2-0.1,0.2,0.1,0.2,0.1C33.8,18.5,35,23,34.3,28c-0.7,4.6-2.4,8.7-5.9,12c-1.8,1.7-3.9,3-6.3,3.8c-0.1,0-0.3,0.1-0.4,0c4.6-3.3,5.4-7.8,4.1-12c-0.9,1.5-1.4,3.3-3.1,4.2c-0.1-0.6-0.2-1.2-0.3-1.8c-0.2-1-0.6-2-1.1-2.9c-1.5-2.5-2.8-5-4-7.7c-0.4-0.8-0.5-1.7-0.6-2.7c0-0.2,0-0.4-0.2-0.6c-1.6,1.4-2.8,3-3.4,5.1c-0.9,2.8-0.4,5.5,0.5,8.1c0.2,0.6,0.4,1.3,0.6,2c-1.2-0.4-2.2-1-3-1.8c-0.8-0.9-1.2-1.9-1.6-3.1c-0.9,1.1-1.2,1-1.5,3.7C7.6,37,7.8,37.2,7.8,37.2z"/></g></svg>');
  }
  .d {
    list-style-image: linear-gradient(0deg, red, yellow);
  }
</style>

list-style-position 清单标记位置

list-style-position 样式属性可以设定清单标记位置，具有继承特性，只有 inside 和 outside 两种属性值，属性值说明如下：

线上展示：https://codepen.io/oxxo/pen/XWLyxBd

<!-- HTML 程式碼 -->
<div>
  <ul class="a">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="b">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {list-style-position: outside;}
  .b {list-style-position: inside;}
</style>

list-style 清单样式

list-style 是一个“简写”的清单样式属性，上述 list-style-type、list-style-image、list-style-position 全都可以使用 list-style 代替，下方范例会将前面几段的写法，改成使用 list-style 表现。

线上展示：https://codepen.io/oxxo/pen/oNrQaMe

<!-- HTML 程式碼 -->
<div>
  <ul class="a">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="b">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="c">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="d">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {list-style: cjk-heavenly-stem;}
  .b {list-style: url(https://cdn-icons-png.freepik.com/16/11694/11694600.png);}
  .c {list-style: '㍿ ';}
  .d {list-style: inside;}
</style>

小结

透过 CSS 设定清单样式时，最常遇到的就是被清单本身的默认样式所影响，但只要透过权重进行覆盖，搭配 list-style 等清单样式，就能轻松处理网页的清单啰。

意见反馈