nth-child не отвечает на селектор класса - PullRequest
Новая
       1

nth-child не отвечает на селектор класса

31 голосов
/ 08 июля 2010

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

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

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

И, очевидно, снова с first-child, чтобы получить тот же эффект, но это не влияет ни на один из divs.

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

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

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

<div id="content">  
  <div id="action-bar"> </div>
  <div id="message"> </div>
  <div class="table"> </div>
  <div class="clear"> </div>
</div>

Вот пример HTML-кода, который я пробовал nth-of-type, а также вот так: 

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

И снова он реагирует только тогда, когда я говорю nth-of-type(3).

РЕДАКТИРОВАТЬ:

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

Ответы [ 3 ]

37 голосов
/ 08 июля 2010

Попробуйте вместо этого :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) выберет элементы <i class="foo">1</i> и <b class="foo">3</b>, так как оба являются первыми своего типа.

7 голосов
/ 12 мая 2014

Это старый пост, но я попал сюда в поисках ответа на подобную проблему.Возможно, это кому-то поможет.

У меня была следующая структура, в которой я хотел выбрать n-й "foo" -div: 

<body>
  <div class='container'>
    <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
</body>

Трюк был "вернуться" и выбратьродительский элемент с повторными братьями и сестрами , в данном случае .container и затем выберите его дочерний элемент (ren): 

.container:nth-of-type(3) .foo {
    styles here
}
0 голосов
/ 08 июля 2010

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

#content .foo:first-of-type { margin-top: 0; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...