li标签自定义marker样式

发表于 更新于 分类于 ，
本文字数： 1.9k 阅读时长 ≈ 2 分钟

虽然个人开发中几乎不用<li>标签,但当遇上了需要使用li标签自定义marker样式的，还是要知道如何自定义的

1. list-style

第一种是最简单的，只用修改list-style属性即可。list-style CSS 属性是一个简写对属性集合，包括list-style-type, list-style-image, 和 list-style-position。当仅仅是更改list-style的显示时，这种方式时最简单快捷的。

2. ::marker

::marker CSS pseudo-element（CSS伪元素） 选中一个list item的marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上，例如<li>和<summary>

允许的属性值

在将::marker作为选择器的规则中，只能使用某些CSS属性：

看到这里，想必聪明的你一定会有些想法了，具体可以到MDN看下。

3. 矢量图标字体

这一种方法是从这里看到的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            padding-left: 1.3em;
        }
        li:before {
            content: "\f085"; /* 图标编码 */
            font-family: FontAwesome;
            display: inline-block;
            margin-left: -1.3em; /* 和li的padding-left一致 */
            width: 1.3em; /* 和li的padding-left一 */
        }
    </style>
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
    <li>床前明月光</li>
    <li>疑是地上霜</li>
    <li>举头望明月</li>
    <li>低头思故乡</li>
</ul>
</body>
</html>

是不是豁然开朗。

4. 直接替换

说直接替换有点勉强了，感觉在解决鼠标hover时，更换list-style的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ul li:hover {
    background: url(bq_scy_jyb_hovrli_03.png) no-repeat 3px center;
}

ul li {
    padding-left: 20px;
    height: 28px;
    line-height: 28px;
    font-family: "宋体";
    font-size: 14px;
    background: url(bq_scy_jyb_libjt_03.png) no-repeat 6px center;
}

ul, li {
    list-style: none;
}

ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

解决思路有一部分和3重合，都是去掉list-style，然后自己再画一个list的marker的。

相关实现链接： http://www.moe.gov.cn/jyb_xxgk/s5743/s5745/

实现效果如下：
动态更改li的marker图例