我有一堆元素的类名红色，但我似乎不能选择class="red"使用以下CSS规则的第一个元素:
.home .red:第一个孩子{ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
这个选择器出了什么问题，我如何纠正它，以类红色为目标的第一个孩子?
当前回答
出于某种原因，上述答案似乎都没有解决父母真正的第一个和唯一的第一个孩子的情况。
#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>
其他回答
你可以使用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 >
试试这个解决方案:
.home p:first-of-type { 边框:5px纯红色; 宽度:100%; 显示:块; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
CodePen链接
出于某种原因，上述答案似乎都没有解决父母真正的第一个和唯一的第一个孩子的情况。
#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 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 > .b ~ .b:not(:第一个孩子){ 背景:无; ｝ Div > .b { 背景:红色; ｝ < div > <p class="a">第一段 <p class="a">第二段 <p class="b">第三段 <p class="b">第四段 < / div >
