数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 ::marker CSS 选择器更改列表项目符号颜色
::marker 选择器用于在 CSS 中选择列表项的标记。它更新项目符号或数字（即无序或有序列表）上的标记属性。我们将使用 ::marker 选择器和 color 属性来更改项目符号颜色。
语法
CSS ::marker 选择器的语法如下所示：
Selector::marker {
attribute: /*value*/;
}
以下示例说明了 CSS ::marker 选择器。
创建彩色垂直项目符号列表
要向项目符号列表添加颜色，请设置 ::marker 选择器。项目符号列表默认情况下垂直显示。这里，我们使用 ::marker 和 color 属性对项目符号列表进行了着色：
li::marker {
color: orange;
}
项目符号列表为圆形，并使用 list-style 属性和 circle 值进行设置：
list-style: circle;
示例
以下是创建彩色项目符号列表的代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: circle;
font-size: 1.2em;
}
li::marker {
color: orange;
}
</style>
</head>
<body>
<h2><strong>Popular Sports</strong></h2>
<ul>
<li>Football</li>
<li>Cricket</li>
<li>Volleyball</li>
<li>Archery</li>
</ul>
</body>
</html>
创建彩色水平项目符号列表
我们使用 ::marker 选择器为项目符号列表设置了颜色。要创建水平项目符号列表，我们为 <li> 设置了 float 属性：
float: left;
项目符号列表为方形，并使用 list-style 属性和 square 值进行设置：
list-style: square;
示例
以下是创建水平彩色项目符号列表的代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square;
overflow: hidden;
}
li::marker {
color: green;
}
li {
width: 15%;
margin: 2%;
float: left;
box-shadow: inset 2px 0px 10px lightblue;
}
</style>
</head>
<body>
<h2><strong>Popular Sports</strong></h2>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Archery</li>
<li>Tennis</li>
</ul>
</body>
</html>
更新于: 2023年10月30日
1K+ 浏览量
广告