стиль li в теге с помощью nth-child ()

Question

Я хочу использовать теги li стиля с nth-child, но эти теги li есть в теге! как это:

<ul>
    <a href=""><li>this is test </li></a>
    <a href=""><li>this is test </li></a>
    <a href=""><li>this is test </li></a>
    <a href=""><li>this is test </li></a>
</ul>

И стиль:

a:nth-child(even){
    background-color: #f5f5f5;
    border-right: 2px solid #666;
}

.li:hover{
    background-color: #555;
    color: #fff;
}

Но это не работает. Я думаю, что тег li должен быть дочерним по отношению к тегу ul.

Answer 1

В вашем css у вас было: .li, и оно предназначено для элементов класса li (например, <div class="li">), а не элементов li.

Вы правы, li должен быть прямым потомком ul tag:

ul li:nth-child(even) {
    background-color: #f5f5f5;
    border-right: 2px solid #666;
 }

ul li:hover{
    background-color: #555;
    color: #fff;
}

<ul>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
</ul>

Если вам нужен фон только для ссылок, а не для всех элементов списка:

ul li:nth-child(even) a {
    background-color: #f5f5f5;
    border-right: 2px solid #666;
}

ul li:hover a {
    background-color: #555;
    color: #fff;
}

<ul>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
    <li><a href="">this is test</a></li>
</ul>