順序付けされたリストから順序付けられていないリスト項目を除外する

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要素を子孫コンビネータ（セレクタの間のスペース）でターゲティングしています。その名前に従って、すべての子孫を対象とします。

代わりに、子のみを対象とする子コンビネータ（>）を使用してください。