CSS第一个子项：在引导中部分不工作之前

如果你看下面的代码，我有一行有两列。这两列都应用了完全相同的CSS代码。但是，

.leftMenu:first child:before

在第一列上运行良好，但是

.pageContent:first child:before

根本不起作用

当

.pageContent:first child:before将
应用于第一列时，它会再次正常工作。这是怎么回事？我该如何修复它


.leftMenu{
背景色：#0e0e；
左边框：1px实心#070707；
}
.leftMenu:第一个孩子：之前{
内容：''；
位置：绝对位置；
高度：20px；
宽度：100%；
背景：-webkit线性梯度（顶部，#151515，#0e0e）；
背景：-莫兹线性梯度（顶部，#151515，#0e0e）；
背景：-o-线性梯度（顶部，#151515，#0e0e）；
背景：线性梯度（至底部，#151515，#0e0e）；
顶部：0px；
左：0；
}
.网页内容{
背景色：#0A0A；
左边框：1px实心#070707；
}
.pageContent:第一个孩子：之前{
内容：''；
位置：绝对位置；
高度：20px；
宽度：100%；
背景：-webkit线性梯度（顶部，#151515，#0A0A）；
背景：-莫兹线性梯度（顶部，#151515，#0A0A）；
背景：-o-线性梯度（顶部，#151515，#0A0A）；
背景：线性梯度（至底部，#151515，#0a0a）；
顶部：0px；
左：0；
边框：1px纯红；
}
.pageContent:第一个子元素
将匹配作为其容器第一个子元素的
.pageContent
元素。这对你的情况不起作用

如果您想要它的第一个子项，请尝试使用
.pageContent>：第一个子项
。
这是因为
.pageContent
不是它的父项的第一个子项或
.row
，在这种情况下，它是
最后一个子项
，因此您可以使用它

.pageContent:last-child:before

或

使用
classSelector:first child
时，如果元素也是其父元素的第一个子元素，但不是该类的第一个元素，也不是该元素的第一个子元素，则它将选择该类的元素


.leftMenu{
背景色：#0e0e；
左边框：1px实心#070707；
}
.leftMenu:第一个孩子：之前{
内容：''；
位置：绝对位置；
高度：20px；
宽度：100%；
背景：-webkit线性梯度（顶部，#151515，#0e0e）；
背景：-莫兹线性梯度（顶部，#151515，#0e0e）；
背景：-o-线性梯度（顶部，#151515，#0e0e）；
背景：线性梯度（至底部，#151515，#0e0e）；
顶部：0px；
左：0；
}
.网页内容{
背景色：#0A0A；
左边框：1px实心#070707；
}
.pageContent:最后一个子项：之前{
内容：''；
位置：绝对位置；
高度：20px；
宽度：100%；
背景：-webkit线性梯度（顶部，#151515，#0A0A）；
背景：-莫兹线性梯度（顶部，#151515，#0A0A）；
背景：-o-线性梯度（顶部，#151515，#0A0A）；
背景：线性梯度（至底部，#151515，#0a0a）；
顶部：0px；
左：0；
边框：1px纯红；
}

这两个元素都不是第一个子元素，因此无法工作。为什么不简单地删除：first child，因为您只有2个？“当.pageContent:first child:before应用于第一列时，它又可以很好地工作。这里发生了什么？”-您刚刚了解了当元素是其父元素的第一个子元素时它的含义
.leftMenu
是其父级（
.row
）的第一个子级，因此选择器匹配-
。但pageContent
不是第一个子级（它是第二个子级），因此选择器不匹配。。。就这么简单，是的。我假设
：第一个孩子
正在选择选择器中的第一个孩子。这让我很困惑，我试过了。这并不能解决问题。不是我的反对票你想干什么
.pageContent:first child
将永远不会选择html中的任何内容，但我看不出您试图将
：before
应用于什么。我试图在第二个元素的顶部插入渐变设计。我假设
：第一个元素将选择选择器中的第一个元素。这就是它不起作用的原因。哦，那么您的
：第一个孩子（现在是
：最后一个孩子）在当前设置中什么都不做。是的！那很好用！非常感谢：）（如果可能，将标记为已接受）
.pageContent:nth-child(2):before