💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# CSS list-style 属性 ## 实例 把图像设置为列表中的列表项目标记: ``` ul { list-style:square inside url('/i/arrow.gif'); } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有浏览器都支持 list-style 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 ## 定义和用法 list-style 简写属性在一个声明中设置所有的列表属性。 ### 说明 该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。 可以按顺序设置如下属性: * list-style-type * list-style-position * list-style-image 可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。 | 默认值: | disc outside none | | --- | --- | | 继承性: | yes | | --- | --- | | 版本: | CSS1 | | --- | --- | | JavaScript 语法: | _object_.style.listStyle="decimal inside" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | _list-style-type_ | 设置列表项标记的类型。参阅:[list-style-type](/cssref/pr_list-style-type.asp "CSS list-style-type 属性") 中可能的值。 | | _list-style-position_ | 设置在何处放置列表项标记。参阅:[list-style-position](/cssref/pr_list-style-position.asp "CSS list-style-position 属性") 中可能的值。 | | _list-style-image_ | 使用图像来替换列表项的标记。参阅:[list-style-image](/cssref/pr_list-style-image.asp "CSS list-style-image 属性") 中可能的值。 | | inherit | 规定应该从父元素继承 list-style 属性的值。 | ## TIY 实例 [在一个声明中定义所有的列表属性](/tiy/t.asp?f=csse_list-style) 本例演示将所有针对列表的属性设置于一个简写属性。 ``` <html> <head> <style type="text/css"> ul { list-style: square inside url('/i/eg_arrow.gif') } </style> </head> <body> <ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 列表](/css/css_list.asp "CSS 列表") HTML DOM 参考手册:[listStyle 属性](/jsref/prop_style_liststyle.asp "HTML DOM listStyle 属性")