CSS 目录实体模型之marker标㊑识的应用

2021-01-20 23:23 jianzhan

文中关键对::master伪原素、list-item下的list-style-image、list-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-item，list-items在建立的情况下会全自动转化成marker和counter。

标识的款式可使用list-style-type和 list-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-spaces和text-space-trim: discard-after一起应用，更能做到要想的实际效果，很感兴趣的请移步 issue 4448和issue 4891

应用list-style-image图象添充标识內容

特定标识图象，当目录项內容一切正常时，用特定图象添充目录项的标识。

list-style-image 一切正常赋值 <image> | none，待定义状况下是 none，功效在目录项list-items下。在其中<image>用以特定标识图象的url。参照连接移步

下边是应用事例，可能为<li>标识的标识块添充上特定连接的ellipse.png图象

li { list-style-image: url("http://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-image和list-style-text的填补，三者全是界定标识块的添充內容，image重视图象，text重视标识符串，::marker则能够定font、color等款式，各有特色。

参照

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标识內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

CSS 目录实体模型之marker标㊑识的应用

为您推荐