列表样式图像 | list-style-image
列表式图像
list-style-image属性指定要用作列表项标记的图像。使用速记通常更方便list-style。
/* Keyword values */
list-style-image: none;
/* <url> values */
list-style-image: url('starsolid.gif'
/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
| 初始值 | none |
|---|---|
| 应用于 | list items |
| 是否继承 | yes |
| 适用媒体 | visual |
| 计算值 | none or the image with its URI made absolute |
| Animation type | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
注意：这个属性应用于列表项目，即元素display: list-item; 默认情况下包含<li>元素。由于此属性是继承的，因此可以在父元素上设置（通常<ol>或<ul>）以使其适用于所有列表项。
句法
价值
<uri>要用作标记的图像的位置。none指定不使用任何图像作为标记。如果设置了此值，则在list-style-type会被使用。
形式语法
<url> | none
实例
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
CSS
ul {
list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
}
结果
规格
| Specification | Status | Comment |
|---|---|---|
| CSS Lists and Counters Module Level 3The definition of 'list-style-image' in that specification. | Working Draft | Extends support to any <image> data type. |
| CSS Level 2 (Revision 1)The definition of 'list-style-image' in that specification. | Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
