為什么 css 規則對串列中的第一項無效？為什么 css 規則對串列中的第一項無效？為什么 css 規則對串列中的第一項無效？為什么 css 規則對串列中的第一項無效？
ol {
padding-left: 10px;
margin-top: 1em;
margin-bottom: 1em;
}
ol li {
background-color:yellow;
}
ol > li > ol > li {
padding-left: 10px;
}
ol {
list-style: none;
counter-reset: li;
}
li:before {
counter-increment: li;
content: counters(li, ".") ". ";
}<ol>
<li>colors1</li>
<ol>
<li>green</li>
<li>green</li>
</ol>
<li>colors2</li>
<ol>
<li>yellow</li>
<li>yellow</li>
</ol>
<li>colors3</li>
<ol>
<li>red</li>
<li>red</li>
<li>red</li>
</ol>
</ol>為什么該規則對串列中的第一項無效？
uj5u.com熱心網友回復：
ol {
padding-left: 10px;
margin-top: 1em;
margin-bottom: 1em;
}
ul > li {
background-color:yellow;
}
ol > li > ol > li {
padding-left: 10px;
}
li:before {
counter-increment: li;
content: counters(li, ".") ". ";
}
ul,ol {
list-style: none;
counter-reset: li;
}<ul>
<li>colors1</li>
<ol>
<li>green</li>
<li>green</li>
<li>green</li>
<li>green</li>
</ol>
<li>colors2</li>
<ol>
<li>yellow</li>
<li>yellow</li>
<li>yellow</li>
<li>yellow</li>
</ol>
<li>colors3</li>
<ol>
<li>red</li>
<li>red</li>
<li>red</li>
</ol>
<li>colors4</li>
<ol>
<li>magenta</li>
<li>magenta</li>
<li>magenta</li>
</ol>
</ul>
</ul>uj5u.com熱心網友回復：
ol {
padding-left: 10px;
margin-top: 1em;
margin-bottom: 1em;
counter-reset: li;
}
.container>li {
background-color: yellow;
}
ol>ol>li {
padding-left: 10px;
}
li:before {
counter-increment: li;
content: counter(li, ".") ". ";
}<ol class="container">
<li>colors1</li>
<ol>
<li>green</li>
<li>green</li>
</ol>
<li>colors2</li>
<ol>
<li>yellow</li>
<li>yellow</li>
</ol>
<li>colors3</li>
<ol>
<li>red</li>
<li>red</li>
<li>red</li>
</ol>
</ol>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/419210.html
標籤：