排除有序列表中的無序列表項數量

Question

我試圖在我的有序列表中排列無序列表旁邊的數字。

但是，出於某種原因，項目A1，項目A2 &項目B1似乎將自己包括在櫃檯中。

需要做什麼，只有列表A和B的標題纔有這個計數器？

.ordered { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    margin-left: 3em; 
 
    padding: 0; 
 
    counter-reset: li-counter; 
 
} 
 
.ordered li { 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
    padding-left: 0.5em; 
 
    min-height: 3em; 
 
    color: #fff; 
 
    font-size: 1.5em; 
 
    line-height: 1.5; 
 
    border-left: 2px solid #fff; 
 
} 
 
.ordered li::before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -01em; 
 
    width: 0.8em; 
 
    font-size: 2.5em; 
 
    line-height: 1; 
 
    font-weight: bold; 
 
    text-align: right; 
 
    color: #fff; 
 
    content: counter(li-counter); 
 
    counter-increment: li-counter; 
 
} 
 
/*unordered list*/ 
 
.unordered ul { 
 
    list-style-type: disc; 
 
} 
 
.unordered li { 
 
    font-size: 1.5em; 
 
    line-height: 1.5; 
 
    margin-left: 15px; 
 
    margin-right: 10px; 
 
    margin-bottom: 30px; 
 
    color: #fff; 
 
} 
 
* { background-color: black; }

<ol class="ordered"> 
 
    <li>List A 
 
    <br> 
 
    <ul class="unordered"> 
 
     <li>Item A1</li> 
 
     <li>Item A2</li> 
 
    </ul> 
 
    </li> 
 
    <li>List B 
 
    <br> 
 
    <ul class="unordered"> 
 
     <li>Item B1</li> 
 
    </ul> 
 
    </li> 
 
</ol>

Answer 1

取而代之的是：

.ordered li::before { ... } 

這樣做：

.ordered > li::before { ... } 

在您的代碼中，您將所有li元素與後代組合子（選擇器之間的空間）作爲目標。按照它的名字，它瞄準所有的後代。

取而代之，請使用僅針對兒童的兒童組合器（>）。