【CSS 列表属性 (List)】

---

CSS 列表属性（List）

用于	属性名	CSS 版本
① 简写属性, 在一个声明中，一次性设置 所有的 列表属性。	list-style	1
② 将 列表项标记 设置为图像。	list-style-image	1
③ 列表项标记的 放置位置。设置 列表项标记的 相对位置 (相对于列表项,适用于 列表项标记 符号/图像)	list-style-position	1
④ 列表项标记的 符号类型 (实心圆,空心圆等)。	list-style-type	1

---

1. list-style 属性: 设置 列表样式 (简写属性)

• ⑴ 设置 列表样式: list-style
  • 在一个声明中，一次性设置 所有的列表属性。
  • 简写属性: 是设置 以下属性的 简写属性
    • list-style-type
    • list-style-position
    • list-style-image

---

• ⑵ 列表样式的 适用对象
  • ① 列表项,一般 <li>标签
    • 所有 display: list-item; 的元素
    • 默认情况下 是 <li>标签.
  • ② 列表项的父元素: <ol> , <ul>
    • 继承性: 因为该属性是 继承的，所以可以 在父元素上 设置它
      • 一般是 有序列表 <ol> 标签 和 无序列表 <ul> 标签
      • 父元素, 会将 相同的列表样式 应用于其中的所有 列表项。

---

• ⑶ list-style属性值的个数 和 顺序
  • ① 顺序: 以 任何顺序 (无顺序要求)
  • ② 个数: 1~3 个值,可接受 1 个值，2 个值 或者 3 个值
    • 未设置的属性: 使用 默认值。
      • 3个属性 默认值： disc outside none
    • 同时设置了 列表项类型和图像: list-style-type ,list-style-image
      • 优先使用: 列表项图像
      • 回退: 列表项图像 不可用时,列表项类型 才作为 回退 使用.

---

• ⑷ 列表样式的 语法
  • list-style: none|list-style-type | list-style-position | list-style-image|inherit;

/* 列表项类型 type */
list-style: square;

/* 列表项图片 image */
list-style: url('../img/shape.png');

/* 列表项位置 position */
list-style: inside;

/* 列表项 类型和位置  type | position */
list-style: georgian inside;

/* 列表项 类型,图片和位置 type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* 关键字值 Keyword value */
list-style: none;

/* 全局值 Global values */
list-style: inherit;
list-style: initial;
list-style: unset;

---

• ⑸ 列表样式的 属性值
  • ① 列表项标记的 符号类型: list-style-type
    • 设置 列表项标记的 类型。
  • ② 列表项标记的 位置: list-style- position
    • 设置 在何处放置 列表项标记。
  • ③ 列表项标记 图像: list-style-image
    • 使用 图像来替换 列表项的标记。
  • ④ 继承父亲: inherit
    • 从 父元素 继承 list-style 属性的值。
  • ⑤ 不使用 列表项样式: none

---

• ⑹ 可访问性问题
  • 不识别为列表: Safari 中，如果 无序列表 设置为 list-style: none;，则不会 在可访问性树中 将其识别为列表。
  • 解决办法:
    • 伪内容: 在每个列表项之前 添加一个 零宽度的空间 作为伪内容，以确保 正确识别 列表。
    • \u200b 字符 = 0宽度的空格 = Zero width space (没有宽度的空格)
    • 确保设计不受 bug 修复的影响，并且 不会对列表项 进行不恰当的描述。

ul{
   list-style: none; 
}
ul li::before{
    content:"\200B";
}

---

• ⑺ 列表样式的 浏览器支持
  • 

---

• 示例1: 给一个 无序列表 设置列表项
• css

.fruit{
    list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");
    border: solid #000000;
    width: 30%;

}
.fruit li{
    background-color: #e8ffec;
    width: 25%;
}

• html

<ul class="fruit">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>葡萄</li>
</ul>

• 

---

1.1 list-style-type 属性: 列表项的 标记符号 (实心圆,空心圆等)

• ⑴ 列表项的 标记符号: list-style-type
  • 设置 列表项元素的 标记符号marker
  • 标记的颜色
    • 将与它 所应用的元素的计算颜色 相同。

---

• ⑵ list-style-type的 适用对象
  • ① 默认元素: <li>,<summary>
    • 默认是 display:list-item。
  • ② 设置为 列表项的元素
    • 可以应用于 任何元素,只要 display: list-item = 列表项元素
  • ③ 列表项的父元素
    • 此外，由于此属性是 继承的，因此可以 在列表项的父元素上list-style-type 设置它 , 这样 使其应用于 所有列表项。
    • 最常见的 默认的列表项的 父元素: <ul>,<ol> 标签

---

• ⑶ 列表样式 类型的 语法
  • list-style-type:disc|none|circle|square |decimal|decimal-leading-zero|lower-roman|upper-roman |lower-alpha|upper-alpha|lower-greek|lower-latin|upper-latin|hebrew|armenia|georgian|cjk-ideographic|hiragana |katakana|hiragana-iroha|katakana-iroha|inherit;

/* 部分类型值 Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/* 字符串值 <string> value */
list-style-type: '-';

/* 与@counter样式规则匹配的标识符 Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

/* 关键字值 Keyword value */
list-style-type: none;

/* 全局值 Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

---

• ⑷ 列表样式类型的 属性值 取值
  • 以下值的 任意一种:
  • ① 一个自定义标识符 <custom-ident> 值
    • identifier,美 /aɪˈdentɪfaɪər/, 标识符
    • 与 自定义计数器样式 @counter-sytle 或预定义样式之一的值 匹配的标识符
    • 自定义计数器的浏览器支持 还不好
      • 
  • ② 一个 symbols() 值
    • CSS函数 允许 定义计数器样式，直接作为 列表样式等属性的值
    • 目前支持还不好
    • 
  • ③ 一个 字符串 <string> 值
    • 目前支持度 还不好
    • 
  • ④ 关键字值 和 none.

---

• ⑸ 列表样式 类型的 常用 关键字 属性值
  • ① 无列表项 标记: none
    • 定义这个关键字,就不显示 列表项的标记符号
    • 使用这个关键字,要注意兼容 Firefox的bug,见 list-style属性的介绍
  • ② 其他 40个 关键字值,如下
    • 越靠前,使用的越多,有些属性值 虽然是实验中属性,但是已经被 很多新浏览器支持了
    • 一些支持度不好的 属性值,没有写在这里
    • 点击查看 关键字值的 浏览器支持

① 实心圆 disc	② 空心圆 circle
③ 实心方块 square, 美 /skwer/	④ 数字 decimal 美 ['dɛsɪml] 十进制 阿拉伯数字, 从1开始
⑤ 0 开头的 数字 decimal-leading-zero (01, 02, 03, … 98, 99)	⑥ 小写 罗马数字 lower-roman (i, ii, iii, iv, v, 等。)
⑦ 大写 罗马数字 upper-roman (I, II, III, IV, V, 等。)	⑧ 小写 英文字母 lower-alpha (a, b, c, d, e, 等。)
⑨ 大写 英文字母 upper-alpha 美 ['ælfə] (A, B, C, D, E, 等。)	⑩ 小写 希腊字母 lower-greek [grik] (α, β, γ…读作 alpha, beta, gamma, 等。)
⑪ 小写 拉丁字母/英文字母 lower-latin 美 /ˈlætn/ (a, b, c, d, e, 等。)	⑫ 大写 拉丁字母/英文字母 upper-latin (A, B, C, D, E, 等。)
⑬ 简体中文 正式编号/简体大写 simp-chinese-formal / -moz-simp-chinese-formal	⑭ 简体中文 非正式编号/简体小写 simp-chinese-informal
⑮ 中国传统的正式编号 / 繁体大写 trad-chinese-formal	⑯ 中国传统的非正式编号 / 繁体小写 trad-chinese-informal (没有繁体的,看不出区别)
⑰ 亚美尼亚 编号 armenian [ɑ:'mi:njən] (ayb/ayp, ben/pen, gim/keem…)	⑱ 乔治亚 编号 georgian 美 /ˈdʒɔːrdʒən/ (an, ban, gan, 等。)
⑲ 希伯来 编号 hebrew 美 /ˈhiːbruː/	⑳ 中日韩 表意数字 cjk-ideographic 美 /,ɪdɪə'græfɪk/ (一，二，三...) cjk :Chinese Japanese Korean
① 平假名 字符 (日语表音) hiragana 美 /ˌhɪrəˈɡɑːnə/ a, i, u, e, o, ka, ki, 等。	② 片假名 字符 katakana 美 ['kɑtə'kɑnə] A, I, U, E, O, KA, KI, 等。
③ 平假名 序号 hiragana-iroha ：i, ro, ha, ni, ho, he, to, 等。	④ 片假名 序号 katakana-iroha I, RO, HA, NI, HO, HE, TO, 等。
⑤ kannada （印）坎那达语 火狐需要 前缀 -moz	⑥ khmer 高棉语 火狐需要 前缀 -moz
⑦ 韩语字母符号 korean-hangul-formal 일만 일천일백일십일	⑧ 正式的韩文编号 korean-hanja-formal 壹萬 壹仟壹百壹拾壹
⑨ 非正式/简写的 韩文编号 korean-hanja-informal	⑩ 老挝语 lao
⑪ 小写 亚美尼亚 编号 lower-armenian	⑫ 大写 亚美尼亚语 upper-armenian
⑬ 蒙古语 mongolian	⑭ 缅甸语 Myanmar / -moz-myanmar
⑮ 奥里雅语 oriya / -moz-oriya	⑯ 波斯语 persian /-moz-persian
⑰ 泰卢固语（印度东部德拉维拉语言） telugu	⑱ 泰国语 thai /-moz-thai
⑲ 西藏语 tibetan	⑳ 马拉雅拉姆语 -moz-malayalam

---

1.2 list-style-position 属性: 设置 列表项标记的 相对位置 (相对于列表项,适用于 列表项标记 符号/图像)

• ⑴ 设置 列表项标记的 相对位置: list-style-position
  • 属性设置 列表项标记::marker 相对于 列表项 的位置。
  • ① 简写属性: 属性值 可在 简写属性list-style 中设置
  • ② 适用对象:
    • ❶ 列表项 display: list-item;的元素
    • ❷ 列表项的父元素:
      • display: list-item;的元素的 父元素,默认最常见的是 <ul>,<ol>
      • 因为继承性原因,父元素设置了,也可以被 子元素列表项继承

---

• ⑵ 列表项标记的位置 语法
  • list-style-position: inside|outside|inherit;

/* 关键字值 Keyword values */
list-style-position: inside;
list-style-position: outside;

/* 全局值 Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;

---

• ⑶ 列表项标记的位置 类型
  • ① 列表项的外部 (默认值): outside
    • 列表项标记 位于 文本的左侧。
    • 放置在 文本内容 以外,不作为 列表项内容的一部分
      • 放在离 列表项 边框边界一定距离处.
        • 这距离在 CSS 中未定义。
      • 列表项 有背景色,列表项的标记 在 列表项外部,没有背景色
        • 
        • 
    • 文本对齐
      • 不会根据标记 对齐。
  • ② 列表项的内部: inside
    • 插入在 列表项内容的 最前面 ,作为第一个 行内框。
    • 作为 列表项内容 的一部分
      • 列表项 有背景色,列表项的标记 在 列表项内部,也会有背景色
        • 
        • 
    • 文本对齐
      • 会根据标记 对齐。
  • ③ 继承父亲: inherit
    • 从父元素 继承 list-style-position 属性的值。

---

• 涉及的代码
• css

.fruit{
    border: solid #000000;
    width: 10%;


}
.fruit li{
    background-color: #e8ffec;
    width: 45%;
   /*list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");*/    
    list-style-type:decimal-leading-zero;
    /*list-style-position: outside;*/
    list-style-position: inside;
}

• html

<ul class="fruit">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>葡萄</li>
</ul>

---

• 列表项标记 位置的 浏览器支持
  • 

---

1.3 list-style-image 属性: 设置 列表项标记 图像

• ⑴ 设置 列表项标记 图像: list-style-image
  • 把列表项的标记 设置为图像。

---

• ⑵ 列表项 标记 图像的 退路/回退操作
  • 列表项 标记 符号 list-style-type"
    • 应该 始终规定一个 “list-style-type” 属性 以防图像不可用。
  • 优先级: 图像背景 优先于 符号标记

---

• ⑶ 列表项标记 图像的 语法
  • list-style-image: none| url| inherit;

/* 关键字值 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
    • 不显示 列表项标记 图像。
  • ② 图像路径: url
    • 图像的路径。
    • 
  • ③ 继承父亲: inherit
    • 从父元素 继承list-style-image 属性的值。

---

• 上图 涉及 CSS 代码

.fruit{

    border: solid #000000;
    width: 10%;


}
.fruit li{
    background-color: #e8ffec;
    width: 55%;
    /*list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");*/
    list-style: square outside url("../images/starsolid.gif");
}

---

2. 相关伪类 ::marker 设置 列表项 标记

• ⑴ 设置 列表项 标记: ::marker CSS 伪元素
  • 选择 列表项的 标记 框/盒子，该列表项 通常包含 项目符号或数字。
  • 适用对象: 它适用于设置为 display: list-item的 任何元素 或 伪元素
    • 比如 默认的 <li>
      和<summary>元素。

::marker {
  color: blue;
  font-size: 1.2em;
}

---

• ⑵ 适用属性

  • 只有 特定的 CSS 属性 可以在一个规则中使用 ::marker 作为选择器:
  • ① 所有 字体类属性: font ,font-* 属性
  • ② color 属性
    • 给列表项的 标记符号 换个颜色
    • 
  • ③ text-combine-upright, unicode-bidi , direction 属性
  • ④ content 属性
    • 

• 涉及的 CSS 代码

.fruit{

    border: solid #000000;
    width: 10%;


}
.fruit li{
    background-color: #e8ffec;
    width: 55%;
    /*list-style: square outside url("https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg");*/
    list-style-type: square;
    list-style-position: outside;
    /*list-style-image: url("../images/starsolid.gif");*/
}

.fruit li::marker{
    color: red;
    content: "标记";
}

---

• ⑶ ::marker 的浏览器支持
  • 目前支持度 还不好,可在 Firefox 中测试

---

♣ 结束语 和 友情链接

• 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
  • 可以备注 支持的理由 或 想对作者说的话哦~
    
• 赞助二维码:
  

---

• 参考文档
  • MDN CSS 教程

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103221074
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！