CSS修改默认列表元素样式(1.修改默认元素样式 2.伪元素选择器)

CSS自定义列表样式：圆、方块与自定义符号

原创已于 2022-02-28 09:47:35 修改 · 944 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-02-28 09:31:57 首次发布

Web 专栏收录该内容

118 篇文章

订阅专栏

CSS修改默认列表元素样式

1. 修改默认元素样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @counter-style circled-alpha {
        system: fixed;
        symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
        suffix: " ";
      }

      ul > li {
        /* 默认实行圆 */
        /* list-style-type: disc;  */
        /* 空心圆 */
        /* list-style-type: circle;  */
        /* 实行方块 */
        /* list-style-type: square; */
        /* 阿拉伯数字有序列表 */
        /* list-style-type: decimal; */
        /* 格鲁吉亚符号 */
        /* list-style-type: georgian; */
        /* 汉字有序列表 */
        /* list-style-type: trad-chinese-informal; */
        /* 卡纳达符号 */
        /* list-style-type: kannada; */

        /* 自定义字符串符号(包括emoji) */
        /* list-style-type: '!~ '; */
        /* list-style-type: '⃞ '; */
        /* list-style-type: '⬜ '; */
        /* list-style-type: '◻️ '; */
        list-style-type: '🃉 ';

        /* @counter-style(可设置非常复杂的样式，要深入CSS的可以向下继续扩展https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule) */
        /* list-style-type: circled-alpha; */
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>修改默认列表元素样式</li>
      <li>修改默认列表元素样式</li> 
      <li>修改默认列表元素样式</li>
    </ul>
  </body>
</html>

在这里插入图片描述

2. 或者使用伪元素选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      ul > li {
          list-style: none;
      }

      /* 用伪元素选择器，可以自己在li标签前面加一个元素，想要大小和颜色都可以像设置div一样设置上去 */
      ul li::before{
          display: inline-block;
          content: '';
          width: 10px;
          height: 10px;
          margin: 0 10px 0 0;
          background-color: rgba(233, 235, 236,1);
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>修改默认列表元素样式</li>
      <li>修改默认列表元素样式</li> 
      <li>修改默认列表元素样式</li>
    </ul>
  </body>
</html>