Question

我想选择第一个名为“aProduct”的div，但我对如何做到这一点感到有些困惑。我已经尝试过了：

<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;
}

Answer 1

#kasticketProducts:first-child .aProduct 使用上面的css意味着首先它会在第一个孩子中搜索带有kasticketproducts的id，这里第一个孩子从这里引用aProductHeader，你试图搜索aProduct但它不在那里。实际上，从DOM层次结构中，aProduct类div处于第二个子节点，这将在css中称为nth-child（2），而不需要再次使用.aProduct。因此，最终的解决方案是写为#kasticketProducts div:nth-child(2)

Answer 2

首先，差异是什么？

来自 MDN ：

:first-child()

:first-child CSS伪类表示作为其父元素的第一个子元素的任何元素。

:first-of-type()

：first-of-type CSS伪类在其父元素的子元素列表中表示其类型的第一个兄弟。

因此，与:first-child()

相比，:first-of-type()有点松散的伪选择器

不幸的是:first-child或:first-of-type并不尊重类或 ids ，它们只关注DOM元素。所以，如果你做的事情会失败

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

因此，在这种情况下，使用CSS可以做的最好的事情就是:nth-of-type()使用2作为值，现在很明显，如果你的元素没有{{1} } class

aProduct

Demo

或

您可以将相邻选择器与#kasticketproducts div:nth-of-type(2) { color: red; }
一起使用
:first-of-type()

Demo

就IE而言，第二种解决方案更加兼容

Answer 3

DEMO

代码无效，因为aProductHeader类在第一次出现aProduct类之前。

参见演示。

Answer 4

您无法定位类的第一个元素，但您可以定位之后的元素，因此您可以在所有aProduct元素上设置样式，然后在所有aProduct元素上覆盖它们1}}在使用~ opreator的第一个之后出现：

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

演示：http://jsfiddle.net/a9W5T/

Answer 5

另一种解决方案是样式.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
}

这种方法的最大优点是它不依赖于标记的结构。

General sibling selectors on MDN

Here's an example

Answer 6

检查#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。道歉。

如何使用第一个孩子？

6 个答案:

General sibling selectors on MDN

Here's an example