CSS nth дочерний селектор - PullRequest
1 голос
/ 02 июля 2010

У меня проблема с селекторами CSS, у меня есть 2 кнопки, отображаемые в HTML с помощью внешнего javascript, и кнопки внизу и вверху моей страницы.

Так что, если я настраиваю CSS с общим именем класса, одна кнопка выглядит хорошо, а другая - нет, поэтому вот моя идея:

  • выберите первую кнопку xclassname и дайте ей немного CSS
  • ничего не делать, чтобы другая кнопка оставила свой CSS, как я могу это сделать

Вот как мне не удалось сделать это с помощью CSS:

.xclassname:nth-child(1) {
  ⋮ declarations
}

Ничего не произошло, кто-нибудь может придумать что-нибудь, что будет работать? Кстати, я использую Prototype, а не JQuery

Ответы [ 2 ]

2 голосов
/ 02 июля 2010

Это селектор CSS3.Вы используете IE?Потому что этот селектор не собирается работать там вообще.Он должен работать в Chrome, Safari или более поздней версии Firefox.

Обходной путь, который я бы использовал, - использовать вместо этого JQuery для выполнения этой операции.Используйте селектор nth-child () в JQuery, чтобы добавить класс с объявлением стиля, которое вы хотите.Обидно, что IE отстает от времени, но именно поэтому это проклятие существования каждого веб-разработчика вокруг ...

0 голосов
/ 02 июля 2010

Принятый ответ неверен. Документы Prototype фактически предоставляют пример n-го дочернего элемента, а в OP упоминается, что он использует Prototype, поэтому ему не нужно беспокоиться о IE.

Это n-й дочерний пример, представленный в документации:

$$('table tbody > tr:nth-child(even)');

Учитывая то, что вы пытаетесь сделать, вы можете настроить таргетинг на элемент следующим образом:

$$('.xclassname').first().setStyle({
  // some style here
});
...