DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始,获得 200 美元的免费赠金!
list-style
属性是一个简写属性,可以在一个声明中设置三个不同列表相关属性的值
ul {
list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}
以下是语法示例
ul {
list-style: square outside none;
}
这与以下的完整版本相同
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
在简写中,如果省略任何值,它们将恢复到初始状态。
list-style-type
的值
list-style-type
属性通过设置列表中每个标记或项目符号的内容来定义列表的类型。 list-style-type
的可接受关键字值包括
disc(实心圆)
circle(空心圆)
square(正方形)
decimal(阿拉伯数字)
decimal-leading-zero(带前导零的阿拉伯数字)
lower-roman(小写罗马数字)
upper-roman(大写罗马数字)
lower-greek(小写希腊字母)
lower-latin(小写拉丁字母)
upper-latin(大写拉丁字母)
armenian(亚美尼亚数字)
georgian(格鲁吉亚数字)
lower-alpha(小写字母)
upper-alpha(大写字母)
none(无)
MDN 有 更完整的列表。非关键字值 在 CSS3 中引入,并且开始得到一些支持,例如
ul {
list-style-type: "→";
}
以下演示包含一组无序列表,以演示每个关键字值
list-style-type
属性适用于所有列表,以及设置为 display: list-item
的任何元素。
列表标记的颜色将是元素的计算颜色(通过 color
属性设置)。
list-style-position
的值
list-style-position
属性定义列表标记的位置,它接受两个值之一:inside
或 outside
。 这些值在下面通过从列表中移除 padding
并添加左侧红色边框来演示
list-style-image
的值
list-style-image
属性确定列表标记是否设置为图像,并接受“none”或指向图像的 URL 的值
ul {
list-style-image: url(images/bullet.png);
}
更多演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
是 | 是 | 是 | 是 | 有效 | 有效 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
是 | 是 | 是 | 是 | 有效 |
Internet Explorer 6 和 7 不支持 list-style-type
的所有关键字值,并且还有一个错误,即浮动列表项不显示其列表标记。 这可以通过在列表项上使用背景图像(而不是 list-style-image
)来解决。
很好的解释!我不确定除了 类型 之外,我还可以添加哪些值到 列表样式 。
你好,如何更改项目符号大小?谢谢
项目符号列表与您的字体大小成正比。如果增加字体大小,列表项目符号也会变大。
如果要专门针对项目符号列表大小而不触及字体,您可能只需要上传自己的自定义项目符号图像即可。
您可以使用图像,创建一个“项目符号图像”,然后像示例中那样使用它。如果需要,您可以为每个列表使用另一种列表样式类型,创建类来实现…
/** 列表样式开始 **/
.ligreen {
list-style-image: url(images/ligreen.png);
}
.lired {
list-style-image: url(images/lired.png);
}
.liblue {
list-style-image: url(http://www.tnhteam.com/plaatjes/liblue.gif);
}
/** 列表样式结束 **/
<!–// html 示例开始 //–>
<ul>
<li class=”ligreen”>绿色项目符号项</li>
<li class=”lired”>红色项目符号项</li>
<li class=”liblue”>蓝色项目符号项</li>
</ul>
<!–// html 示例结束 //–>
您需要创建适合您需求的图片,您可以使用完整的 http 路径,我在这个例子中使用了这两种…
我希望这对您有所帮助。
编码愉快 ;-)
okokok
嘿,这些也是有效的吗
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
是的,它们确实是!
我喜欢使用 iroha 列表类型。
非常有帮助
那么如何创建具有多个项目符号的列表?
就像列表中的列表?
请阅读我的其他评论并根据需要创建尽可能多的样式类,您可以在我的其他评论中找到一个示例。
我的其他评论的直接链接:https://css-tricks.org.cn/almanac/properties/l/list-style/#comment-1588566
如何通过 CSS 在小写字母列表中显示右括号而不是点?
谢谢!我的下拉菜单可以正常工作,但它们没有链接到页面。我有页面的确切网址,但它不起作用。我做错了什么?
@Bonnie 什么不起作用?您有网址吗?我想帮助您使其正常工作.. 最诚挚的问候,Willem
新手 >> 所以图像不能保存到图像文件夹,并从那里拉出来代替普通的项目符号? 必须从某个地方的 URL 中提取图像……?谢谢,Neil
因为这是一个 CSS 解决方案,你不能只是将图像拖到代码中,虽然你可以将图像放入文件夹中,但你仍然需要告诉代码在哪里找到这个图像,这通常是用 URL 完成的。
所有图像都是通过 URL 提取的,无论是本地 URL 还是显式的完整 URL。 即使是 “images/yourimage.jpg” 也是一个 URL,它只是所谓的“相对 URL”,因为它相对于调用它的文件所在的位置。
grgfgfg
我想为我作为项目符号提供的图像提供热点。
怎么做?
只是说在 HTML 5 中没有描述列表的概念。 而是定义列表。
嗨,我如何更改列表项之前的数字颜色? 我找不到任何 css 属性来做到这一点。 现在,我将 span 放在 li 中并更改整个列表的颜色,然后再更改项目的颜色……
在定义列表(或任何除了 `ul` 或 `ol` 之外的东西)中使用 `list-style-type` 定义数据元素在 Firefox 中仍然不起作用——而且这个 bug 已经存在超过 7 年了: https://bugzilla.mozilla.org/show_bug.cgi?id=436662
非常感谢你。 我已经尝试解决这个问题几周了。 你的解决方案完全有效!
如何为空的 list-style-image 创建选择器? 假设我有以下规则
并允许用户选择图像 - 我有 javascript 设置
menuItem.style.listStyleImage = cssUri
我从他们指向的文件中获取。 但我也想设置
menuItem.style.listStyleImage = ‘none’;
并且对于这种情况,为空图像定义
image = none 的正确选择器是什么?
好文章……你是如何在列表上设置灰色背景的? 太酷了……
有没有办法使用某个字符? 更准确地说是像“☆”这样的 html 实体?
谢谢。
回复我自己,我能够使用来自 https://drafts.csswg.org/css-lists/#list-style-property 的信息使其工作,使用
ul { list-style-type: “★”; }
但是我无法使用 ☆ 我不得不将其从页面粘贴到编辑器中,这可能是一个问题。
它适用于 Sea Monkey 浏览器,但不适用于 Pale Moon。
您可以创建自己的自定义 `list-style-type`,如 http://www.w3.org/TR/css-counter-styles-3/ 中所述
您在此页面中列出了一些花哨的字符: https://w3schools.org.cn/charsets/ref_utf_symbols.asp
Fos 还有更多 utf8 字符,您有这个很棒的网站: http://www.fileformat.info/info/unicode/char/2605/index.htm
我犯了一个错误……我之前评论中的 `!important` 没有用……
最终应该实现 ::market 什么样式项目符号。 我不想使用自定义图像等。 除非您使用 SVG,否则图像很糟糕。
我想要一个带有编号图像的“类似画廊”的页面。 将它们添加到带有链接浮动项目的列表中是可以的。 看起来像这样
| 图像 |
|- 标题 -|
我想让图像在标题左侧自动编号。 使用 list-style:decimal 工作正常。 但是图像(当然)在图像之前的左侧。
有没有办法设置项目符号/编号位置以获得
|—图像—|
|- 编号 标题 -|
有没有人可以指导我创建或找到一些漂亮的 CSS 项目符号,这些项目符号像通常在一个页面网站或 PPT 中那样逐个出现?
关于如何使有序列表中的数字加粗的任何想法?
感谢您提供此代码,它帮助我创建了在我的网站上有效的代码,复选标记/勾号后的空格会在任何文本之前创建空格
我喜欢所有不同的列表样式制作方法。 我只是想分享我最喜欢的使用 css 制作圆形项目符号的方法。
https://iiiji.com/circled-number-lists/