資料結構
網路
關係資料庫管理系統
作業系統
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+ 瀏覽量
廣告