第一个元素的CSS选择器类 [英] CSS selector for first element with class
问题描述
我有一堆类的元素 red
:
< p class =red>< / p>
< div class =red>< / div>
我似乎不能选择第一个元素与 class =红色
使用以下CSS规则:
.red:first -child {
border:5px solid red;
}
这个选择器有什么问题, >
UPDATE :
感谢评论,我发现元素必须它的父亲的第一个孩子得到选择,这不是我的情况。我有以下结构:
< div class =home>
< span> blah< / span>
< p class =red>第一< / p>
< p class =red>第二< / p>
< p class =red>第三< / p>
< p class =red>第四< / p>
< / div>
并且此规则在注释中提及失败:
.home .red:first-child {
border:1px solid red;
}
如何使用 c>
这是一个最知名的例子, $ c>:first-child 工程。 在CSS2中引入,:first-child
伪类表示其父类的第一个子。而已。有一个非常普遍的误解,它挑选任何子元素是第一个匹配由复合选择器的其余部分指定的条件。由于选择器的工作方式(请参阅这里了解),这根本不是真的。
选择器级别3引入了:first-of-type
伪类,它表示其元素类型的兄弟之间的第一个元素。 此答案用插图说明:first-child
和:first-of-type
之间的区别。但是,与:first-child
一样,它不会查看任何其他条件或属性。在HTML中,元素类型由标记名称表示。在问题中,该类型是 p
。
不幸的是,没有类似的 first-of-class
伪类,用于匹配给定类的第一个子元素。 Lea Verou 的一种解决方法,我来了(尽管完全独立)是使用该类对所有元素应用样式:
/ *
*选择.home的所有.red子项,包括第一个
*,并给它们一个边框。
* /
.home> .red {
border:1px solid red;
}
然后使用在第一个之后,使用一般同胞组合器〜
的重写规则:
/ *
*选择除.home的第一个.red子项,
*以外的所有项,并从上一个规则中删除边框。
* /
.home> .red〜.red {
border:none;
}
现在只有第一个元素 class =red
以下是规则的应用示例:
< div class =home>
< span> blah< / span> <! - [1] - >
< p class =red>第一< / p> <! - [2] - >
< p class =red>第二< / p> <! - [3] - >
< p class =red>第三< / p> <! - [3] - >
< p class =red>第四< / p> <! - [3] - >
< / div>
-
此元素没有类red
,因此跳过。 -
仅应用第一条规则;
此元素具有红色
类,但不会在任何元素前加上red
。 -
这两个规则都适用;
此元素具有red
类。它之前还有至少一个具有类red
的其他元素。因此,应用这两个规则,第二个border
声明覆盖第一个,从而撤销。 -
您可以使用它来解决IE7和IE8中的
:first-of-type
:通过提供类型选择器而不是类选择器,article> p {
/ *将样式应用于文章> p:first-of-type,其可能或可能不是:first-child * /
}
article> p〜p {
/ *撤消上述每种后续文章的样式> p * /
}
-
您可以按属性选择器或任何其他简单选择器,而不是类
-
您也可以将此覆写技术与伪元素,即使伪元素在技术上不是简单的选择器。
No rules are applied; no border is rendered.
This element does not have the classred
, so it's skipped.Only the first rule is applied; a red border is rendered.
This element has the classred
, but it's not preceded by any elements with the classred
in its parent. Thus the second rule is not applied, only the first, and the element keeps its border.Both rules are applied; no border is rendered.
This element has the classred
. It is also preceded by at least one other element with the classred
. Thus both rules are applied, and the secondborder
declaration overrides the first, thereby "undoing" it, so to speak.You can use this to work around
:first-of-type
in IE7 and IE8, by simply supplying a type selector instead of a class selector (again, more on its incorrect usage here in a later section):article > p { /* Apply styles to article > p:first-of-type, which may or may not be :first-child */ } article > p ~ p { /* Undo the above styles for every subsequent article > p */ }
You can filter by attribute selectors or any other simple selectors instead of classes.
You can also combine this overriding technique with pseudo-elements even though pseudo-elements technically aren't simple selectors.
作为一个奖励,虽然它是在选择器3中引入的,但是一般的兄弟组合器实际上是由IE7和更新的支持,不像
:第一类型
和:nth-of-type()
,它们仅由IE9向前支持。 事实上,兄弟组合器是这项技术中唯一重要的组件,和它有这样惊人的浏览器支持,使这种技术非常多才多艺 - 你可以适应它过滤元素除了类选择器:
请注意,为了使其工作,您需要提前了解其他同级元素的默认样式,以便您可以覆盖第一个规则。此外,由于这涉及在CSS中覆盖规则,因此使用单个选择器无法实现相同的功能,可与选择器API 或 Selenium 的CSS定位器。
值得一提的是,Selectors 4介绍了 :nth-child()
符号(最初是一个全新的伪类,名为:nth-match()
), code>:nth-child(1 of .red)代替假设的 .red:first-of-class
。作为一个相对最近的提案,没有足够的可互操作的实现,以便在生产站点中可用。希望这将很快改变。在此期间,我建议的解决方法应该适用于大多数情况。
请记住,此回答假设问题是寻找每个第一个子元素给定类。对于整个文档中的复杂选择器的第n个匹配,既没有伪类也没有一个通用的CSS解决方案 - 解决方案是否依赖于文档结构。 jQuery提供:eq()
,:第一个
,:last
等等,但请再次注意,它们的功能非常不同于:nth-child()
等。使用Selectors API,您可以使用 document.querySelector()
获得第一个匹配:
var first = document.querySelector('。home> .red');
或使用 document.querySelectorAll()
选择任何特定匹配的索引器:
var redElements = document.querySelectorAll('。home> .red');
var first = redElements [0];
var second = redElements [1];
// etc
code> .red:nth-of-type(1)解答原始接受的回答 Philip Daubmeier 作品(最初由 Martyn
例如,如果您只想选择 p
在您的原始标记中:
< p class =red>< / p>
< div class =red>< / div>
那么你不能使用 当某个类的第一个元素也是其类型的第一个时,伪类将起作用,但通过巧合。这种行为在菲利普的回答中得到证明。当你在该元素之前粘贴相同类型的元素时,选择器将失败。获取更新后的标记: 应用规则 选择器会立即失败,因为第一个 I have a bunch of elements with a class name I can't seem to select the first element with the What is wrong in this selector and how do I correct it? UPDATE: Thanks to the comments, I figured out that the element has to be the first child of its parent to get selected which is not the case that I have. I have the following structure: and this rule fails as mentioned in the comments: How can I target the first child with class This is one of the most well-known examples of authors misunderstanding how Selectors level 3 introduces a Unfortunately, there is no similar Then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator Now only the first element with Here's an illustration of how the rules are applied:
As a bonus, although it was introduced in Selectors 3, the general sibling combinator is actually pretty well-supported by IE7 and newer, unlike In fact, the fact that the sibling combinator is the only important component in this technique, and it has such amazing browser support, makes this technique very versatile — you can adapt it for filtering elements by other things, besides class selectors: Note that in order for this to work, you will need to know in advance what the default styles will be for your other sibling elements so you can override the first rule. Additionally, since this involves overriding rules in CSS, you can't achieve the same thing with a single selector for use with the Selectors API, or Selenium's CSS locators. It's worth mentioning that Selectors 4 introduces an extension to the Keep in mind that this answer assumes that the question is looking for every first child element that has a given class. There is neither a pseudo-class nor even a generic CSS solution for the nth match of a complex selector across the entire document — whether a solution exists depends heavily on the document structure. jQuery provides Or use
Although the For example, if you only wanted to select the Then you can't use When the first element of a certain class is also the first of its type, the pseudo-class will work, but this happens only by coincidence. This behavior is demonstrated in Philip's answer. The moment you stick in an element of the same type before this element, the selector will fail. Taking the updated markup: Applying a rule with The selector will immediately fail, because the first 这篇关于第一个元素的CSS选择器类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! .red:first-of-type
(等价于 .red:nth-of-type(1)
),因为每个元素是其类型的第一个 p
和 div
),因此 p>
< div class =home>
< span> blah< / span>
< p class =red>第一< / p>
< p class =red>第二< / p>
< p class =red>第三< / p>
< p class =red>第四< / p>
< / div>
.red:first-of-type
将工作,但一旦你添加另一个 p
没有类:
< div class =home>
< span> blah< / span>
< p> dummy< / p>
< p class =red>第一< / p>
< p class =red>第二< / p>
< p class =red>第三< / p>
< p class =red>第四< / p>
< / div>
.red
元素现在是第二 p
元素。red
:<p class="red"></p>
<div class="red"></div>
class="red"
using the following CSS rule:.red:first-child{
border:5px solid red;
}
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
.home .red:first-child{
border:1px solid red;
}
red
?:first-child
works. Introduced in CSS2, the :first-child
pseudo-class represents the very first child of its parent. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), that is simply not true.:first-of-type
pseudo-class, which represents the first element among siblings of its element type. This answer explains, with illustrations, the difference between :first-child
and :first-of-type
. However, as with :first-child
, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is p
.:first-of-class
pseudo-class for matching the first child element of a given class. One workaround that Lea Verou and I came up with for this (albeit totally independently) is to apply styles to all your elements with that class:/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
~
in an overriding rule:/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
class="red"
will have a border.<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
:first-of-type
and :nth-of-type()
which are only supported by IE9 onward. If you need good browser support, you're in luck.
:nth-child()
notation (originally an entirely new pseudo-class called :nth-match()
), which will allow you to use something like :nth-child(1 of .red)
in lieu of a hypothetical .red:first-of-class
. Being a relatively recent proposal, there aren't enough interoperable implementations for it to be usable in production sites yet. Hopefully this will change soon. In the meantime, the workaround I've suggested should work for most cases.:eq()
, :first
, :last
and more for this purpose, but note again that they function very differently from :nth-child()
et al. Using the Selectors API, you can either use document.querySelector()
to obtain the very first match:var first = document.querySelector('.home > .red');
document.querySelectorAll()
with an indexer to pick any specific match:var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc
.red:nth-of-type(1)
solution in the original accepted answer by Philip Daubmeier works (which was originally written by Martyn but deleted since), it does not behave the way you'd expect it to.p
in your original markup:<p class="red"></p>
<div class="red"></div>
.red:first-of-type
(equivalent to .red:nth-of-type(1)
), because each element is the first (and only) one of its type (p
and div
respectively), so both will be matched by the selector.<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
.red:first-of-type
will work, but once you add another p
without the class:<div class="home">
<span>blah</span>
<p>dummy</p>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
.red
element is now the second p
element.