css�::marker标记是什么?怎样使用?

Admin 2021-10-11 群英技术资�

    css�::marker标记是什么?怎样使用?一些朋友可能对::marker标记的作用及使用不是很了解,因此这篇文章就给大家来介绍一�::marker标记,下文有示例及详细的介绍,接下来就跟随小编来学习一下吧�

    ::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相关
  • white-space属�
  • color属�
  • text-combine-upright, unicode-bidi, direction属�
  • content属�
  • 所有的animation和transition属�

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

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

    指定标记图像,当列表项内容正常时,用指定图像填充列表项的标记�

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

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

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

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

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

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

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

@counter-style thumbs {
 system: cyclic;
 symbols: "\1F44D";
 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等样式,各具特色�

    关于css�::marker标记的内容就介绍到这,上述实例具有一定的借鉴价值,感兴趣的朋友可以参考学习,希望能对大家有帮助,想要了解更多::marker标记的内容,大家可以关注群英网络其它相关文章�

文本转载自脚本之�

标签� css� marker

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部