энный ребенок не отвечает на селектор класса

Question

энный ребенок не отвечает на селектор класса

Если это, как не предполагается, но я, может казаться, не добираюсь nth-child подтвердить селектор класса.

Я имею, говорят что 4 отделения в другом отделении, всех различных классах и идентификаторах. Я должен выбрать первую инстанцию отделения с упомянутым классом. Например:

#content .foo:nth-child(1) { margin-top: 0; }

И очевидно снова с first-child для получения того же влияния но это не влияет ни на одно из отделений.

Теперь, если я хочу вынудить это работать с тем отделением, я могу сделать это:

#content .foo:nth-child(3) { margin-top: 0; }

Это именно так происходит, что это - 3-е отделение в #content, который бессмыслен, потому что я должен получить 1-й экземпляр чего-либо с тем классом.

Вот образец HTML, я попробовал nth-of-type также как это:

#content .table:nth-of-type(1) { margin: 0 }

Снова это только отвечает, когда я говорю nth-of-type(3).

Править:

Я настроил рабочий пример проблемы, которую я имею здесь: http://jsfiddle.net/aHwS8/

32

css css-selectors

задан stuartc 8 July 2010 в 13:48

2 ответа

Я думаю, вы используете неправильный селектор, попробуйте:

#content .foo:first-of-type { margin-top: 0; }

0

ответ дан 27 November 2019 в 21:00

Другие вопросы по тегам:

css css-selectors

Похожие вопросы:

score 37 · Accepted Answer

Попробуйте вместо этого использовать :nth-of-type() псевдоселектор:

#content .foo:nth-of-type(1) { margin-top: 0; }

Обратите внимание, что :nth-of-type() считает элементы с одинаковым именем. Поэтому .foo:nth-of-type(1) выберет не первый элемент с классом foo, а любой первый элемент, который является первым в списке элементов, сгруппированных по одному имени. Если у вас есть документ типа:

<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

.foo:nth-of-type(1), то будут выбраны элементы 1 и 3, поскольку оба являются первыми в своем типе.