CSS ::marker 属性

CSS ::marker 属性用于设置列表标记的样式。通常用于自定义列表样式。

基本语法

list-style-type: none; /* 取消默认列表样式 */
list-style-type: disc; /* 原点标记 */
list-style-type: circle; /* 空心圆圈标记 */
list-style-type: square; /* 空心方块标记 */
list-style-type: decimal; /* 十进制数字标记 */
list-style-type: lower-roman; /* 小写罗马数字标记 */
list-style-type: upper-roman; /* 大写罗马数字标记 */
list-style-type: lower-alpha; /* 小写字母标记 */
list-style-type: upper-alpha; /* 大写字母标记 */
list-style-type: armenian; /* 亚美尼亚数字标记 */
list-style-type: georgian; /* 格鲁吉亚数字标记 */
list-style-type: hebrew; /* 希伯来数字标记 */
list-style-type: cjk-ideographic; /* 中文标记 */
list-style-type: hiragana; /* 日文平假名标记 */
list-style-type: hiragana-iroha; /* 日文汉字标记 */
list-style-type: katakana; /* 日文片假名标记 */
list-style-type: katakana-iroha; /* 日文片假名标记 */

代码示例

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
  <li>葡萄</li>
</ul>

<style>
  /* 自定义数字标记 */
  ul {
    list-style-type: decimal;
  }

  /* 自定义圆圈标记 */
  ul.second {
    list-style-type: circle;
  }

  /* 自定义小写字母标记 */
  ul.third {
    list-style-type: lower-alpha;
  }

  /* 自定义大写字母标记 */
  ul.fourth {
    list-style-type: upper-alpha;
  }

  /* 自定义图片标记 */
  ul.fifth {
    list-style: none;
  }

  ul.fifth li:before {
    content: url("https://upload.wikimedia.org/wikipedia/commons/8/8d/Smiley_head_happy.svg");
    margin-right: 10px;
  }
</style>

<ul class="second">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
  <li>葡萄</li>
</ul>

<ul class="third">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
  <li>葡萄</li>
</ul>

<ul class="fourth">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
  <li>葡萄</li>
</ul>

<ul class="fifth">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
  <li>葡萄</li>
</ul>

效果展示

• 苹果
• 香蕉
• 橘子
• 葡萄

ul {
  list-style-type: decimal;
}

• 苹果
• 香蕉
• 橘子
• 葡萄

ul.second {
  list-style-type: circle;
}

• 苹果
• 香蕉
• 橘子
• 葡萄

ul.third {
  list-style-type: lower-alpha;
}

• 苹果
• 香蕉
• 橘子
• 葡萄

ul.fourth {
  list-style-type: upper-alpha;
}

• 苹果
• 香蕉
• 橘子
• 葡萄

ul.fifth {
  list-style: none;
}

ul.fifth li:before {
  content: url("https://upload.wikimedia.org/wikipedia/commons/8/8d/Smiley_head_happy.svg");
  margin-right: 10px;
}

总结

CSS ::marker 属性是用于改变列表样式的，使用非常灵活，可以满足不同需求的自定义样式。常见的列表样式有数字、字母、圆点、方块等。也可以自定义样式，甚至可以使用图片作为标记。掌握 ::marker 属性可以让你的网页更加美观。