CSS 列表属性 List

CSS 列表属性（List）
- 1. list-style 属性: 设置列表样式 (简写属性)
- - 1.1 list-style-type 属性: 列表项的标记符号 (实心圆,空心圆等)
  - 1.2 list-style-position 属性: 设置列表项标记的相对位置 (相对于列表项,适用于列表项标记符号/图像)
  - 1.3 list-style-image 属性: 设置列表项标记图像
- 2. 相关伪类 ::marker 设置列表项标记
♣ 结束语和友情链接

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
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

【CSS 列表属性 (List)】相关推荐

前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
css 列表属性详细总结
列表类型(list-style-type) 要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型. 在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点. 在有序 ...
CSS 列表样式(ul)
1.CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 2.在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点. ...
CSS 列表样式 (ul)
CSS 列表 CSS 列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在 HTML 中,有两种类型的 HTML列表: 无序列表 - 列表 ...
CSS(七) css列表样式（ul）
CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 1.列表在HTML中,有两种类型的html列表: 无序列表-列表项标记用特殊图形(如: ...
mysql 映射到map null_mybatis处理查询map列表属性为null的问题，而导致查询map无该key对象...
1.常规处理方法(数据库以mysql为例) IFNULL(m.last_use_time,) ) ) as last_lat if判断是否为null,设置一个默认值. 2.前台jsp页面处理,判断是否 ...
css html属性,HTML/CSS从零开始-常用属性
一.css文本属性 (1)文本大小{font-size:value;} 单位:pt:9pt=12px;浏览器默认字体大小为16px em:1em=16px; 在CSS2.0中 xx-small:9px ...
CSS样式属性参考手册
CSS3 动画属性(Animation) 属性描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...
CSS列表，定位和实例
每一个成功者都有一个开始.勇于开始,才能找到成功的路! 今天让我们继续努力吧!加油! 列表 CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志. CSS 列表从某种意义上讲,不是描 ...

【CSS 列表属性 (List)】

CSS 列表属性 List

CSS 列表属性（List）

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

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

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

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

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

♣ 结束语和友情链接

【CSS 列表属性 (List)】相关推荐

最新文章

热门文章

【CSS 列表属性 (List)】

CSS 列表属性 List

CSS 列表属性（List）

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

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

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

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

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

♣ 结束语 和 友情链接

【CSS 列表属性 (List)】相关推荐

最新文章

热门文章

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

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

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

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

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

♣ 结束语和友情链接