我有一堆元素的类名红色，但我似乎不能选择class="red"使用以下CSS规则的第一个元素:
.home .red:第一个孩子{ 边框: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="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参考。
其他回答
我相信使用相对选择器+来选择紧随其后的元素，在这里工作得最好(正如之前很少有人建议的那样)。
这种情况下也可以使用这个选择器
.home p:first-of-type
但这是元素选择器，不是类选择器。
这里你有一个CSS选择器列表:https://kolosek.com/css-selectors/
我使用下面的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>
顾名思义，: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。
出于某种原因，上述答案似乎都没有解决父母真正的第一个和唯一的第一个孩子的情况。
#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>
我的项目里就有这个。
Div > .b ~ .b:not(:第一个孩子){ 背景:无; ｝ Div > .b { 背景:红色; ｝ < div > <p class="a">第一段 <p class="a">第二段 <p class="b">第三段 <p class="b">第四段 < / div >
