首页 > 作文

CSS 列表模型之marker标记的使用

更新时间:2023-04-03 18:52:27 阅读: 评论:0

本文主要对::master伪元素、list-item下的list-style-imagelist-style-type样式属性进行介绍,并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步css 标准文档

::marker 是什么

::marker是一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。

<style>li::marker { content: "(" counter(list-item) ")"; }li { display: list-item; }</style><ul>  <li>zhaodao88.com 找商机</li>  <li>zhaodao88.com 找人脉</li>  <li>zhaodao88.com 找采购</li></ul>

效果图:

在这里,marker为元素定义的是每一项列表项前面的标记符,在伪元素内的content的内容就是要在列表项前面所填充的内容。

使用::marker填充标记内容

需要注意的是,普通元素要想使用marker,必须将元素定义成display: list-itemlist-items在创建的时候会自动生成markercounter

标记的样式可以使用list-style-typelist-style-image属性或者直接使用::marker伪元素进行样式编写。下面展示一个例子。

::marker伪元素对标记进行控制,伪元素内content的内容就是标记符的内容

<style>  p { margin-left: 12 em; }  p.note {    display: list-item;    counter-increment: note-counter;  }  p.note::marker {    content: "note " counter(note-counter) ":";    color: blue;    font-weight: bold;  }</style><p>zhaodao88.com 找商机</p><p class="note">zhaodao88.com 找采购</p><p>zhaodao88.com 找人脉</p>

效果如图:

当然也可以为标记设置字体样式、颜色等属性,类似上面效果li::marker { color: 我敬佩的老师blue; font-weight:bold; }

值得注意的是:目前只有以下属性能够作用于marker伪元素上

所有的字体样式:font相关whi2021国庆阅兵te-space属性color属性text-combine-upright, unicode-bidi, direction属性content属性所有的animation和transition属性

issue提出,在标记使用white-space: pre可能不会有很好的效果,可以尝试text-space-collap: prerve-spacestext-space-trim: discard-after一起使用,更能达到想要的效果,感兴趣的请移步 和

使用list-style-image图像填充标记内容

指定标记图像,当列表项狼客网络营销成功法则内容正常时,用指定图像填充列表项的标记。

list-style-image 正常取值 <image> | none,未定义情况下是 none,作用在列表项list-items下。其中<image>用于指定标记图像的url。参考链接移步

下面是使用例子,将会为<li>标签的标记块填充上指定链接的ellip.png图像

li { list-style-image: url("http://www.example.com/ellip.png") }

使用list-style-type文本类型填充标记内容

指定标记字符串,当列表项内容正常时,用指定字符串填充列表项的标记。

list-style-type 正常取值 <counter-style> | <string> | none,未定义情况下是 disc(圆形标记符),作用在列表项list-items下。参考链接移步

<counter-style>是css 定义的计数器样式,允许开发者自定义counter的样式。比如:

@counter-style thumbs { system: c皮城天赋yclic; symbols: "f44d"; suffix: " ";}ul {  list-style-type: thumbs;}

具体<counter-style>定义规则参考

下面是关于list-style-type的使用例子(如果作用元素不是列表元素,则元素的display必须设置为list-item)

ul { list-style-type: ""; } // 使用""作为标记符p.note { // 如果作用元素不是列表元素,则元素的display必须设置为list-item  display: list-item;  list-style-type: "note: ";  list-style-position: inside;}ol { list-style-type: upper-roman; } // 定义为罗马数字的大写形式ul { list-style-type: symbols(cyclic '○' '●'); } // 标记符在'○'和'●'之间切换ul { list-style-type: none; } // 不显示标记

注意

::marker伪元素标记不是所有浏览器都支持,包括chrome也只是在80以上版本通过启用experimental web platform才支持,如果你想要测试效果,请前往chrome://flags启用experimental web platform。并不推荐在实际项目去使用这条规则,更推荐使用常规的做法去设置标记块样式。

总结

列表在前端项目中很常见,应用场景也十分广泛。个人觉得,::marker伪元素是对list-style-imagelist-style-text的补充,三者都是定义标记块的填充内容,image注重管理咨询师图像,text注重字符串,::marker则可以定fontcolor等样式,各具特色。

参考

https://www.w3.org/tr/2020/wd-css-lists-3-20200709
https://developer.mozilla.org/en-us/docs/web/css/::marker

到此这篇关于css 列表模型之marker标记的使用的文章就介绍到这了,更多相关css marker标记内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-03 18:52:22,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/71246e5e47925be915f5812e7d220a38.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS 列表模型之marker标记的使用.doc

本文 PDF 下载地址:CSS 列表模型之marker标记的使用.pdf

标签:标记   元素   样式   列表
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图