Я хотел бы выбрать первый 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;
}
#kasticketProducts:first-child.aProduct
Используя выше, css означает, что сначала он будет искать идентификатор с kasticketproducts в этом первом ребенке, здесь первый ребенок ссылается на aProductHeader, здесь вы пытаетесь найти aProduct, но его там нет. На самом деле из DOM-иерархии класс aProduct имеет второй ребенок, это будет передаваться в css как nth-child (2) здесь и не нужно снова.aProduct. Итак, окончательное решение для этого записывается как #kasticketProducts div:nth-child(2)
Во-первых, в чем разница?
Из MDN:
Псевдокласс класса :first-child
представляет любой элемент, который является первым дочерним элементом его родителя.
Псевдокласс класса 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;
}
ИЛИ
вы можете использовать смежный селектор с помощью :first-of-type()
#kasticketproducts div:first-of-type + div {
color: red;
}
Второе решение ДОЛЖНО СОВЕРШЕННО, что касается IE
Вы не можете ориентировать первый элемент класса, но вы можете ориентировать элементы, которые приходят после того, как, так что вы можете установить стили на всех aProduct
элементов, а затем заменить его на всех aProduct
, которая приходит после первого, используя ~
opreator:
#kasticketproducts .aProduct {
margin-top: 30px;
background: red;
}
#kasticketproducts .aProduct ~ .aProduct {
margin-top: 0;
background: none;
}
Другим решением будет стиль .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
}
Самое большое преимущество этого подхода заключается в том, что он не полагается на структуру разметки.
Код не работает, потому aProductHeader
класс aProductHeader
перед первым aProduct
класса aProduct
.
См. Демонстрацию.
Проверьте #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. Извиняется.
Вы можете использовать
: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 внутри вашего идентификационного элемента
:first-of-type