css, выберите предыдущий якорь

Question

<ul class="list">
    <li><a href="">Text 1</a></li>
    <li><a href="">Text 2</a></li>
    <li><a href="" class="selected">Text 3</a></li>
</ul>

как выбрать привязку для Текст 2 без добавления дополнительного класса?(и без JavaScript)

<style type="text/css">
    ul.list li a.selected ******{background-color:#000}
</style>

вывод:

<li><a href="" style="background-color:#000;">Text 2</a></li>

Answer 1

Без JavaScript ваши результаты не всегда будут работать во всех браузерах. Проверьте эту ссылку по sitepoint

Это будет сделано с помощью CSS3. Этот псевдокласс в настоящее время не поддерживается в Internet Explorer.

<style type="text/css">
ul.list li:nth-child(2) a { background:#000 }
</style>

Answer 2

n-й дочерний селектор может сделать это.Поддержка браузера может быть разной.

Попробуйте:

ul.list li:nth-child(2) a { background:#000; }

Ссылка: http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 3

Я не думаю, что есть какой-либо способ просто выбрать * -й дочерний элемент.(За исключением элемента firstChild, который позволяет указывать первый дочерний элемент.) Но в качестве альтернативы вы можете последовательно назначать пронумерованные идентификаторы элементу li, например

<li id="1"><a href="">Text 1</a></li>
<li id="2"><a href="">Text 2</a></li>
<li id="3"><a href="">Text 3</a></li>

Затем вы можете использовать это для указания * этого элемента liзначение в атрибуте id.Таким образом, ваш CSS должен быть

ul.list li[id="2"] a { background-color: #000; }

Answer 4

Похоже, вы ищете предыдущий селектор брата, которого, к сожалению, не существует.См. этот пост для полезных ссылок о том, что возможно.