我有一堆元素的类名红色，但我似乎不能选择class="red"使用以下CSS规则的第一个元素:
.home .red:第一个孩子{ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
这个选择器出了什么问题，我如何纠正它，以类红色为目标的第一个孩子?
顾名思义，:first-child选择器用于选择父标记的第一个子标记。所以这个例子将工作(刚刚尝试在这里):
<body>
<p class="red">first</p>
<div class="red">second</div>
</body>
但是，如果您将标记嵌套在不同的父标记下，或者类为red的标记不是父标记下的第一个标记，则这将不起作用。
还要注意，这不仅适用于整个文档中的第一个这样的标记，而且适用于每次在它周围包装一个新的父标签，例如:
<div>
<p class="red">first</p>
<div class="red">second</div>
</div>
<div>
<p class="red">third</p>
<div class="red">fourth</div>
</div>
第一个和第三个将是红色的。
对于你的情况，你可以使用:n -of-type选择器:
r: nth-of-type (1) ｛ 边框:5px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
归功于Martyn，他删除了包含这种方法的答案。
有关:n -child()和:n -of-type()的更多信息，请访问http://www.quirksmode.org/css/nthchild.html。
请注意，这是一个CSS3选择器，因此一些过时的浏览器版本可能无法正常运行(例如IE8或更老版本)。详情请访问https://caniuse.com/?search=nth-of-type。
为了匹配选择器，元素的类名必须为红色，并且必须是其父元素的第一个子元素。
<div>
<span class="red"></span> <!-- MATCH -->
</div>
<div>
<span>Blah</span>
<p class="red"></p> <!-- NO MATCH -->
</div>
<div>
<span>Blah</span>
<div><p class="red"></p></div> <!-- MATCH -->
</div>
由于其他答案涵盖了它的问题，我将尝试另一半，如何解决它。不幸的是，我不知道你有一个CSS唯一的解决方案，至少不是我能想到的。还有一些其他的选择....
在生成元素时给元素赋一个first类，如下所示: <p class="red first"></p> . < div class = "红色" > < / div > CSS: 当代。红色{ 边框:5px纯红色; ｝ 这个CSS只匹配第一个类和红色类的元素。 或者，在JavaScript中做同样的事情，例如这里是你会使用jQuery来做这件事，使用与上面相同的CSS: $ (r:首先).addClass(“第一”);
这是作者误解第一个孩子如何工作的最著名的例子之一。在CSS2中引入的:first-child伪类表示其父类的第一个子类。就是这样。有一个非常常见的误解，即它会选择第一个匹配复合选择器其余部分指定条件的子元素。由于选择器的工作方式(参见这里的解释)，这是不正确的。
选择器级别3引入了一个:类型第一的伪类，它表示其元素类型的兄弟元素中的第一个元素。这个答案用插图解释了:first-child和:first-of-type之间的区别。然而，与:first-child一样，它不查看任何其他条件或属性。在HTML中，元素类型由标记名称表示。题目中，这个类型是p。
Unfortunately, there is no similar :first-of-class pseudo-class for matching the first child element of a given class. At the time this answer was first posted, the newly published FPWD of Selectors level 4 introduced an :nth-match() pseudo-class, designed around existing selector mechanics as I mentioned in the first paragraph by adding a selector-list argument, through which you can supply the rest of the compound selector to get the desired filtering behavior. In recent years this functionality was subsumed into :nth-child() itself, with the selector list appearing as an optional second argument, to simplify things as well as averting the false impression that :nth-match() matched across the entire document (see the final note below).
当我们等待跨浏览器支持的时候(认真地说，已经有将近10年了，在过去的5年里只有一个实现)，Lea Verou和我独立开发的一个解决方案(她是第一个做的!)是首先将你想要的样式应用到你所有的类元素上:
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
．.． 然后在重写规则中使用一般的兄弟组合子~“撤消”第一个类之后的元素的样式:
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
现在只有class="red"的第一个元素有边框。
下面是如何应用这些规则的示例:
.home > .red { 边框:1px纯红色; ｝ .home > .red ~ .red { 边界:没有; ｝ < div class = "家" > < 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 >
No rules are applied; no border is rendered. This element does not have the class red, so it's skipped. Only the first rule is applied; a red border is rendered. This element has the class red, but it's not preceded by any elements with the class red 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 class red. It is also preceded by at least one other element with the class red. Thus both rules are applied, and the second border declaration overrides the first, thereby "undoing" it, so to speak.
作为奖励，尽管它是在Selectors 3中引入的，但一般的兄弟组合子实际上在IE7和更新版本中得到了很好的支持，而不像:first-of-type和:nth-of-type()只在IE9之后才得到支持。如果您需要良好的浏览器支持，那么您很幸运。
事实上，兄弟组合子是这种技术中唯一重要的组件，而且它有如此惊人的浏览器支持，这使得这种技术非常通用——你可以用它来过滤元素，除了类选择器:
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 in the question 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.
请注意，为了使其工作，您需要提前知道其他兄弟元素的默认样式是什么，以便可以覆盖第一个规则。此外，由于这涉及到CSS中的覆盖规则，您无法通过使用Selectors API或Selenium的CSS定位器来实现相同的功能。
On a final note, keep in mind that this answer assumes that the question is looking for any number of first child elements having 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 :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()与索引器一起选择任何特定的匹配:
var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc
虽然Philip Daubmeier最初接受的答案中的。red:n -of-type(1)解决方案有效(最初由Martyn编写，但后来被删除了)，但它并没有像您期望的那样表现。
例如，如果你只想选择这里的p:
<p class="red"></p>
<div class="red"></div>
．.． 那么你就不能使用.red:first-of-type(相当于.red:nth-of-type(1))，因为每个元素都是它的第一个(也是唯一一个)类型(分别是p和div)，所以两者都将被选择器匹配。
当某个类的第一个元素也是其类型的第一个元素时，伪类将工作，但这只是巧合。这种行为在Philip的回答中得到了证明。当您在该元素之前插入一个相同类型的元素时，选择器将失败。从问题中获取标记:
<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的规则可以工作，但是一旦你在没有类的情况下添加了另一个p:
<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元素现在是第二个p元素。
正确答案是:
.red:first-child, :not(.red) + .red { border:5px solid red }
第一部分:如果元素是父元素的第一个，并且类为“red”，它将得到border。 第二部分:If "。红色“元素不是其父元素的第一个，而是紧跟着一个没有类的元素”。红色”，它也应该配得上说边界的荣誉。
不然就是没发生。
菲利普·多布梅尔的回答，虽然被接受，但并不正确-见附件小提琴。 BoltClock的答案可以工作，但不必要地定义和覆盖样式 (特别是一个问题，否则它将继承一个不同的边界-你不想声明other to border:none)
编辑: 如果你有“红色”后面的非红色几次，每个“第一个”红色将得到边界。为了防止这种情况，我们需要使用BoltClock的答案。看到小提琴
你可以使用n -of-type(1)，但要确定网站不需要支持IE7等，如果是这种情况，使用jQuery添加主体类，然后通过IE7主体类找到元素，然后元素名称，然后添加第n个子样式。
根据你更新的问题
<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 span + .red{
border:1px solid red;
}
这将选择类home，然后是元素span，最后是所有紧接在span元素之后的。red元素。
参考:http://www.w3schools.com/cssref/css_selectors.asp
您可以将代码更改为这样的内容以使其工作
<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 span + .red{
border:3px solid green;
}
这里有一个来自SnoopCode的CSS参考。
出于某种原因，上述答案似乎都没有解决父母真正的第一个和唯一的第一个孩子的情况。
#element_id > .class_name:first-child
如果您只想将样式应用于此代码中的第一个子类，那么以上所有答案都将失败。
<aside id="element_id">
Content
<div class="class_name">First content that need to be styled</div>
<div class="class_name">
Second content that don't need to be styled
<div>
<div>
<div class="class_name">deep content - no style</div>
<div class="class_name">deep content - no style</div>
<div>
<div class="class_name">deep content - no style</div>
</div>
</div>
</div>
</div>
</aside>
以上答案太复杂了。
.class:first-of-type { }
这将选择第一种类型的类。MDN源
注:2021年6月在Chrome 91和Firefox 89上测试。
试试这个解决方案:
.home p:first-of-type { 边框:5px纯红色; 宽度:100%; 显示:块; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
CodePen链接
你可以使用first-of-type或n -of-type(1)
r { 颜色:绿色; ｝ /* .red:n -of-type(1) */ r: first-of-type { 颜色:红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
我使用下面的CSS有一个背景图像列表ul li
#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){ background-position: center; background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png); background-repeat: no-repeat; } <footer id="footer"> <div class="module"> <ul class="menu "> <li class="level1 item308 active current"></li> <li> </li> </ul> </div> <div class="module"> <ul class="menu "><li></li> <li></li> </ul> </div> <div class="module"> <ul class="menu "> <li></li> <li></li> </ul> </div> </footer>
我的项目里就有这个。
Div > .b ~ .b:not(:第一个孩子){ 背景:无; ｝ Div > .b { 背景:红色; ｝ < div > <p class="a">第一段 <p class="a">第二段 <p class="b">第三段 <p class="b">第四段 < / div >
我相信使用相对选择器+来选择紧随其后的元素，在这里工作得最好(正如之前很少有人建议的那样)。
这种情况下也可以使用这个选择器
.home p:first-of-type
但这是元素选择器，不是类选择器。
这里你有一个CSS选择器列表:https://kolosek.com/css-selectors/
你可以试试这样做吗:
.red:first-of-type {
border: 5px solid red;
}
你也可以在最后一个元素上使用this(如果你需要的话):
.red:last-of-type {
border: 5px solid red;
}
总之，在阅读了这所有的页面和其他的以及大量的文档之后。总结如下:
对于第一个/最后一个子代:现在可以安全使用(所有现代浏览器都支持) :n -child()现在也可以安全使用(所有现代浏览器都支持)。但要小心，它甚至计算兄弟姐妹!因此，下面的代码将无法正常工作:
/*选择display_class类的前2个元素 *但这行不通，因为第n个孩子甚至算兄弟姐妹 *包括第一个div skip_class * / .display_class: nth-child (n + 2) { 背景颜色:绿色; ｝ < ul > <li class="skip_class">test 1</li> <li class="display_class">test 2应为绿色</li> <li class="display_class">test 3应为绿色</li> <li class="display_class">test 4</li> < / ul >
目前，有一个选择器:n -child(-n+2 of .foo)，它支持按类选择，但现代浏览器不支持，所以没有用。
所以，这给我们留下了Javascript解决方案(我们将修复上面的例子):
// Here we'll go through the elements with the targeted class // and add our classmodifer to only the first 2 elements! [...document.querySelectorAll('.display_class')].forEach((element,index) => { if (index < 2) element.classList.add('display_class--green'); }); .display_class--green { background-color:green; } <ul> <li class="skip_class">test 1</li> <li class="display_class">test 2 should be in green</li> <li class="display_class">test 3 should be in green</li> <li class="display_class">test 4</li> </ul>
我想很多人已经解释过了。您的代码只选择了第一个实例的第一个子对象。如果你想选择红色类的所有第一个子类，你需要使用
.home > .red:first-child {
/* put your styling here */
}
我很惊讶没有人提到最干净的解决方案:
r:没有。红色~ .红色){ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
下面的代码肯定在任何地方都能正常工作。 它简单而简短。
<div class="home">
<span>blah</span>
<p class="blue"> first-blue </p>
<p class="blue"> second-blue </p>
<p class="blue"> third-blue </p>
<p class="red"> first-red </p>
<p class="red"> second-red </p>
<p class="red"> third-red </p>
<p class="red"> fourth-red </p>
<p class="pink"> first-pink </p>
<p class="pink"> second-pink </p>
<p class="red"> new-first-red </p>
<p class="red"> new-second-red </p>
</div>
我们可以选择第一个红色:
.home .red:not(.home .red ~ .red) {
background-color: blue;
}
如果你想选择new-first-red，你应该使用+而不是~。
一个快速的脏jQuery解决方案，用于标记具有相同类名的一组元素中的第一个和最后一个元素:
$('.my-selector').each(function(index, item) { if (!$(item).next().hasClass('my-selector')) { $(item).addClass('last'); } if (!$(item).prev().hasClass('my-selector')) { $(item).addClass('first'); } }); .my-selector { padding: 5px; background: #ccc; } .my-selector.first { background: #fcc; } .my-selector.last { background: #cfc; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span>first element...</span> <div class="my-selector">Row 1</div> <div class="my-selector">Row 2</div> <div class="my-selector">Row 3</div> <div class="my-selector">Row 4</div> <span>other elements...</span> <div class="my-selector">Row 3</div> <div class="my-selector">Row 4</div> </div>
