Как использовать первого ребенка?

0

Я хотел бы выбрать первый div, называемый "aProduct", но я немного смущен тому, как это сделать. Я уже пробовал это:

<div id="kasticketProducts">
    <div class="aProductHeader"></div>
    <div class="aProduct"></div>
    <div class="aProductHeader"></div>
    <div class="aProduct"></div>    
</div>

Это мой текущий CSS:

#kasticketProducts:first-child .aProduct {
    margin-top: 30px;
    background: red;
}
  • 1
    Если у вас есть несколько div с одинаковыми идентификаторами, и вы хотите нацелиться на первый. тогда это плохая практика!
  • 0
    Также вы можете использовать :first-of-type
Показать ещё 2 комментария
Теги:
css-selectors

7 ответов

3
Лучший ответ

#kasticketProducts:first-child.aProduct Используя выше, css означает, что сначала он будет искать идентификатор с kasticketproducts в этом первом ребенке, здесь первый ребенок ссылается на aProductHeader, здесь вы пытаетесь найти aProduct, но его там нет. На самом деле из DOM-иерархии класс aProduct имеет второй ребенок, это будет передаваться в css как nth-child (2) здесь и не нужно снова.aProduct. Итак, окончательное решение для этого записывается как #kasticketProducts div:nth-child(2)

  • 0
    Аааа, это прекрасно работает. Спасибо! И спасибо за объяснение.
  • 0
    Рад слышать. Я не очень хорошо знаю английский, спасибо за понимание.
Показать ещё 4 комментария
2

Во-первых, в чем разница?

Из MDN:

:first-child()

Псевдокласс класса :first-child представляет любой элемент, который является первым дочерним элементом его родителя.


:first-of-type()

Псевдокласс класса first-of-type представляет первый родной тип своего типа в списке дочерних элементов его родительского элемента.

Таким образом, неучтенный :first-child() - это довольно свободный псевдоселектор по сравнению с :first-of-type()


К сожалению :first-child или :first-of-type не учитывают классы или идентификаторы, они касаются только элементов DOM. Так что если вы сделаете что-то вроде этого, не получится

#kasticketproducts div.aProduct:first-of-type {
    color: red;
}

Таким образом, в этом случае лучше всего использовать CSS :nth-of-type() с 2 как значение, теперь, очевидно, он потерпит неудачу, если ваш элемент не имеет class aProduct

#kasticketproducts div:nth-of-type(2) {
    color: red;
}

Demo

ИЛИ

вы можете использовать смежный селектор с помощью :first-of-type()

#kasticketproducts div:first-of-type + div {
    color: red;
}

Demo

Второе решение ДОЛЖНО СОВЕРШЕННО, что касается IE

0

Вы не можете ориентировать первый элемент класса, но вы можете ориентировать элементы, которые приходят после того, как, так что вы можете установить стили на всех aProduct элементов, а затем заменить его на всех aProduct, которая приходит после первого, используя ~ opreator:

#kasticketproducts .aProduct {
    margin-top: 30px;
    background: red;
}
#kasticketproducts .aProduct ~ .aProduct {
    margin-top: 0;
    background: none;
}

Демо: http://jsfiddle.net/a9W5T/

0

Другим решением будет стиль .aProduct, а затем переопределить стиль для любых последующих вхождений .aProduct с использованием общего сочетания братьев и сестер:

#kasticketProducts .aProduct {
    // effectively becomes the style for the first occurrence of .aProduct
}

#kasticketProducts .aProduct ~ .aProduct {
    // overrides the style set above for all occurrences of .aProduct,
    // apart from the first
}

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

Общие селекторные ролики на MDN

Вот пример

0

DEMO

Код не работает, потому aProductHeader класс aProductHeader перед первым aProduct класса aProduct.

См. Демонстрацию.

0

Проверьте #id, он чувствителен к регистру

Кроме того, будьте осторожны с кавычками, вы не закрываете их.

<div id="kasticketProducts">
<div class="aProductHeader">aaa</div>
<div class="aProduct">aaa</div>
<div class="aProductHeader">aaaa</div>
<div class="aProduct">aaa</div> 

Для первого .aProduct:

#kasticketProducts .aProduct:nth-child(2) {
    /* your styles */
}

Извините за это, подумал о том, чтобы получить первый kasticketProduct. Извиняется.

0

Вы можете использовать

:first-child :nth-of-type(1) :first-of-type или: nth-child(1n)

И почему ваш код работает, потому что вы используете:

#kasticketProducts:first-child .aProduct

это займет первый элемент #kasticketProducts, используйте это вместо: #kasticketProducts.aProduct:nth-child(2) { color: red; } #kasticketProducts.aProduct:nth-child(2) { color: red; } <- Это займет первый элемент.aProduct внутри вашего идентификационного элемента

Ещё вопросы

Сообщество Overcoder
Наверх
Меню