Bootstrap中CSS :first-child:before部分失效问题及修复咨询

嘿，这个问题我之前也踩过坑！核心问题出在你对:first-child选择器的理解上——它匹配的是某个元素在其父元素里的第一个子元素，而不是拥有某个类的第一个元素。

咱们看你的结构：

<div class="row">
  <div class="col-sm-2 leftMenu"></div> <!-- 这是.row的第一个子元素 -->
  <div class="col-sm-10 pageContent"></div> <!-- 这是.row的第二个子元素 -->
</div>

• .leftMenu:first-child能生效，是因为带.leftMenu的div正好是.row的第一个子元素，选择器能匹配到它；
• 但.pageContent:first-child完全找不到目标，因为带.pageContent的div是.row的第二个子元素，它根本不是父元素的第一个孩子，所以伪元素自然不会渲染。

修复方案（两种可选，推荐第一种） #

方案1：直接去掉:first-child，简化选择器

因为你的.row里只会有一个.leftMenu和一个.pageContent，直接给类名加伪元素就够了，同时别忘了给父元素加position: relative——否则绝对定位的伪元素会相对于整个文档定位，位置会乱：

.leftMenu { 
  background-color: #0e0e0e; 
  border-left: 1px solid #070707;
  position: relative; /* 新增：让伪元素相对当前元素定位 */
}
.leftMenu:before { /* 去掉:first-child */
  content:''; 
  position:absolute; 
  height:20px; 
  width: 100%; 
  background: linear-gradient(to bottom, #151515, #0e0e0e); 
  top:0px; 
  left:0; 
}
.pageContent { 
  background-color: #0a0a0a; 
  border-left: 1px solid #070707;
  position: relative; /* 新增：让伪元素相对当前元素定位 */
}
.pageContent:before { /* 去掉:first-child */
  content:''; 
  position:absolute; 
  height:20px; 
  width: 100%; 
  background: linear-gradient(to bottom, #151515, #0a0a0a); 
  top:0px; 
  left:0; 
  border: 1px solid red; 
}

方案2：用:nth-child(2)精准匹配位置

如果你一定要基于子元素位置来选择，可以用:nth-child(2)匹配.row的第二个子元素：

.pageContent:nth-child(2):before {
  /* 你的伪元素样式 */
}

额外提醒 #

之前的代码里，伪元素用了position:absolute但父元素没设position: relative，即使选择器对了，伪元素也可能跑到页面顶部去，所以一定要给.leftMenu和.pageContent加上position: relative，确保伪元素的定位是相对于它们自己的。

内容的提问来源于stack exchange，提问作者icecub