ソートされたリストの背景色を変更します

Question

私は現在、CSSを使用しているHTMLの小さなナビゲーションで作業中です。 リンクが含まれているすべてのli要素にソートされたリストがあります。 背景色を変更するには、背景色を変更する必要があります。問題は、 "this"バックグラウンドがli要素の一部ではないため、リスト項目のインデックスを示す数値が変更されないことです。 Example

この背景は全体のリストですが、私はちょうどこの特定のリスト項目の背景が変更されることを望ん「所有」ol要素、。
私のコードは次のとおりです。

.navig a:hover{ 
    background-color: #555; 
    color: white; 
} 

と

<ol> 
    <li> 
     <a href="target.php">target</a> 
    </li> 
</ol> 

navigクラスはリンクがナビゲーションに属していることを明確にするために使用されます。

これをJScriptなしで修正する方法はありますか、これは「親を選択するためのCSSサポート」に欠けていますか？

Answer 1

使用list-style-position: inside;li要素に番号/弾丸を移動するには：説明したよう

ol { 
 
    background: #ff9999; 
 
    padding: 0; 
 
    list-style-position: inside; 
 
} 
 
li { 
 
    padding: 5px; 
 
} 
 
li:hover { 
 
    background: #ffe5e5; 
 
} 
 
li > a { 
 
    display: block; 
 
    color: black; 
 
    text-decoration: none; 
 
}

<ol> 
 
\t <li> 
 
\t \t <a href="https://www.google.co.il/search?q=coffee">Coffee</a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="https://www.google.co.il/search?q=tea">Tea</a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="https://www.google.co.il/webhp?q=coca+cola">Coca Cola<a> 
 
\t </li> 
 
</ol>

Answer 2

別の解決策をhereがDL/DTリストにあなたのリストを変換することで、明示的に生成しますCSSカウンタを使用して数字を入力します。

.navig { 
 
    counter-reset: navig-counter; 
 
} 
 
.navig dt:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
.navig dt:before { 
 
    content: counter(navig-counter); 
 
    counter-increment: navig-counter; 
 
    margin-right: 5px; 
 
}

<dl class="navig"> 
 
    <dt><a href="#">First item</a></dt> 
 
    <dt><a href="#">Second item</a></dt> 
 
    <dt><a href="#">Third item</a></dt> 
 
</dl>