首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

列表样式图像 | list-style-image

list-style-image属性指定要用作列表项标记的图像。使用速记通常更方便list-style

代码语言:javascript
复制
/* Keyword values */
list-style-image: none;

/* <url> values */
list-style-image: url(?developer/section/1072138/&);

/* 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会被使用。

形式语法

代码语言:javascript
复制
<url> | none

实例

HTML

代码语言:javascript
复制
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

CSS

代码语言:javascript
复制
ul {
  list-style-image: url(?developer/section/1072138/"https:/mdn.mozillademos.org/files/11981/?developer/section/1072138/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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com