css find first child дает неверный результат

Question

css find first child дает неверный результат

0

У меня есть:

<ul>
<li id="test1">The third paragraph.</li>
<li id="test1">The fourth paragraph.</li>
<li id="test2">The second paragraph.</li>
<li id="test2">The third paragraph.</li>
<li id="test2">The fourth paragraph.</li>
<li id="test3">The second paragraph.</li>
<li id="test3">The third paragraph.</li>
<li id="test4">The fourth paragraph.</li>
<li id="test4">The fourth paragraph.</li>
<li id="test7">The fourth paragraph.</li>
<li id="test7">The fourth paragraph.</li>
</ul>

И код css:

ul > #test4:first-child
{
background:#ff0000;
}

Этот код ul> # test1: first-child хорош, но ul> # test4: first-child not working

Демо, где проблема?

user3316979 21 фев. 2014, в 00:51

Источник

Теги:

jquery

css

css-selectors

2 ответа

0

Это не работает, потому что вы ищете :first-child элемента <ul> который имеет идентификатор с именем test4. То, что вы хотите, это первый элемент с id test4 и я думаю, что это невозможно с чистым CSS.

Кроме того, вам лучше использовать классы вместо идентификаторов, так как вы не должны повторять идентификаторы в элементах HTML.

Roberto Linares 20 фев. 2014, в 22:03

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-20T21-26-00.000Z

Во-первых, идентификатор элемента должен быть уникальным,

Second : first-child будет соответствовать только первому дочернему элементу независимо от любого другого селектора, используемого для дочернего элемента, поэтому в вашем случае первый # test1 будет единственным элементом, сопоставляемым ul > :first-child селектор ul > :first-child

Я не думаю, что для этого есть только решение css.

Вместо атрибута ID использовать класс, а затем использовать : first-selector в jQuery, как

.someclass{
    //some rule
}

тогда

$('ul > .test4:first').addClass('someclass')

Я второй это [я собирался предложить это сам, а потом вы отредактировали :)]