這個問題在這里已經有了答案：
![如何更改有序串列 (HTML) 中專案符號的顏色？[復制]](https://img.uj5u.com/2021/12/30/d029c86d84524bcfaee60f899ce4d0cb.png)
下面是我輸入的代碼：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h5 {
text-align: center;
}
body {
background-color: #FAFAFA;
}
</style>
</head>
<body>
<h1>About Me</h1>
<h5>Hanjour and Haznawi</h5>
<div style="text-align: right">
<img src ="aine.jpg" alt ="personal" width="200" length="200" style="float: left;">
</div>
<li>
<ol>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</ol>
</li>
</body>
</html>
uj5u.com熱心網友回復：
首先，從有效的 HTML 開始；一個<li>元素必須是A的后代<ul>或<ol>由于某種原因你已經扭轉了這個包裹。更正后，它應該是：
::marker {
color: red;
}<ol>
<li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ol>在這里，我們使用::marker偽元素來設定檔案中所有 <li>元素的標記樣式；以這些風格的<ol>和<ul>不同的，我們可以改為：
ol li::marker {
color: red;
}
ul li::marker {
color: purple;
}<ol>
<li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ol>
<ul>
<li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ul>如果您選擇不使用默認串列標記，而是list-style-none在<li>,<ul>或<ol>元素上使用，并使用 CSS 生成的內容，則::marker偽元素將被洗掉，而您必須color專門設定樣式，如此：
*, ::before, ::after {
box-sizing: border-box;
font: 1rem / 1.5 sans-serif;
margin: 0;
padding: 0;
}
ol, ul, li {
list-style-type: none;
}
ul, ol {
counter-reset: listCounter;
}
li::before {
content: counter(listCounter);
color: lime;
margin-inline: 1em;
}<ol>
<li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ol>
<ul>
<li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ul>uj5u.com熱心網友回復：
- 將無序串列中專案符號的顏色更改為紅色并增加其大小。
::marker {
color: red;
font-size: 2em;
}
來源：https : //developer.mozilla.org/en-US/docs/Web/CSS/ :: marker
- 在影像和段落文本之間放置一些距離。
向<img>標簽添加 CSS 樣式。例如添加保證金。
<img src="aine.jpg" alt="personal" width="200" length="200" style="float: left;margin-right: 20px;" />
- 更正您的 HTML:
<li>應后跟<ol>.
完整的 HTML 代碼片段如下：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h5 {
text-align: center;
}
body {
background-color: #fafafa;
}
::marker {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<h1>About Me</h1>
<h5>Hanjour and Haznawi</h5>
<div style="text-align: right">
<img src="aine.jpg" alt="personal" width="200" length="200" style="float: left; margin-right: 20px" />
</div>
<oi>
<li>
My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.
</li>
</oi>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397282.html
上一篇：無法將按鈕移動到右側