我有一個共同的清單
ul.dsgvo {
list-style-type: lower-alpha;
}
但我想把上市后的點改成“）”
當前：目標：一）
我已經試過了
content: counter(lower-alpha) ") ";
但這回傳了 0 而不是 lower-alpha（拉丁語也不起作用）
串列結構：
<ol><p>
<li class="lawli">
<p>text</p>
</li>
<li class="lawli">
<p>text</p>
<ul>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
</ul>
<li class="lawli">
<p>text</p>
</li>
</p></ol>
uj5u.com熱心網友回復：
你可以用這樣:before的計數器來做到這一點：
顯示代碼片段
ol{
list-style-type: none;
counter-reset: listStyle;
}
li{
counter-increment: listStyle;
}
li:before{
content: counter(listStyle, lower-alpha) ") ";
}<ol>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
</ol>并使用您的 HTML：
顯示代碼片段
ol{
list-style-type: none;
counter-reset: lvl1;
}
ul{
list-style-type: none;
}
ol ol{
counter-reset: lvl2
}
li{
position: relative;
}
ol > li{
counter-increment: lvl1;
}
ol > li > ul > li{
counter-increment: lvl2;
}
li:before{
content: counter(lvl1, lower-alpha) ") ";
position: absolute;
left: -20px;
}
li li:before{
content: counter(lvl1, lower-alpha) counter(lvl2, lower-alpha) ") ";
left: -30px;
}<ol>
<p>
<li class="lawli">
<p>text</p>
</li>
<li class="lawli">
<p>text</p>
</li>
<li class="lawli">
<p>text</p>
<ul>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
</ul>
<li class="lawli">
<p>text</p>
</li>
</p>
</ol>但是請去掉p后面的右邊ol。
這是您提供的影像的 HTML 代碼：
此示例使用兩個不同的計數器。ol一個用于名為 lvl1的第一級（外部），一個用于給定的子級（稱為 lvl2）。
顯示代碼片段
ol{
list-style-type: none;
counter-reset: lvl1;
}
ul{
list-style-type: none;
}
ol ol{
counter-reset: lvl2
}
li{
position: relative;
}
ol > li{
counter-increment: lvl1;
}
ol > li > ul > li{
counter-increment: lvl2;
}
li:before{
content: "(" counter(lvl1) ") ";
position: absolute;
left: -25px;
}
li li:before{
content: counter(lvl2, lower-alpha) ") ";
left: -30px;
}<ol>
<p>
<li class="lawli">
<p>text</p>
<ul>
<li>
<p>text</p>
</li>
</ul>
</li>
<li class="lawli">
<p>text</p>
</li>
<li class="lawli">
<p>text</p>
<ul>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
</ul>
<li class="lawli">
<p>text</p>
</li>
</p>
</ol>uj5u.com熱心網友回復：
當前的 CSS::marker為此添加了偽元素。您可以使用它并為不支持它的瀏覽器（例如 Safari）創建一個后備：
ol {
list-style-type: none;
counter-reset: listStyle;
}
li {
counter-increment: listStyle;
}
@supports selector(::marker) {
li::marker {
content: counter(listStyle, lower-alpha) ") ";
}
}
@supports not selector(::marker) {
li::before {
content: counter(listStyle, lower-alpha) ") ";
}
}<ol>
<li>Foo</li>
<li>Bar</li>
<li>Foo</li>
<li>Bar</li>
</ol>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444991.html
標籤：css