CSS中last-child选中所有子元素？标签嵌套致选择器失效求助

嘿，我来帮你拆解这个问题！首先得说，你的核心问题出在HTML结构不符合标准规范，这直接导致了CSS选择器失效，咱们一步步来：

为什么选择器会失效？ #

HTML明确规定：<ul>的直接子元素必须是<li>，而你把<a>直接放在了<ul>里面、<li>外面。这种错误结构会让浏览器的DOM解析出现异常——此时每个<li>都是它的父元素<a>的唯一子元素，所以你用li:nth-child(1)时，所有<li>都会被选中（因为它们各自都是父元素的第一个子元素），其他序号的选择器自然也找不到目标。

另外你重复写了两次li的样式，后面的border-right: 1px solid #ff0000;会覆盖前面的样式，这也是个小细节问题。

解决方案 #

方案1：修正HTML结构（强烈推荐，符合规范） #

按照标准，应该把<a>嵌套在<li>内部，这样DOM结构正常，CSS选择器就能乖乖工作了：

<ul>
  <li><a href="#">Solutions</a></li>
  <li><a href="#">Industries</a></li>
  <li><a href="#">Resources</a></li>
  <li><a href="#">Partners</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#" class="button">Enterprise</a></li>
</ul>

对应的CSS调整（实现最后一个li去掉右边框的需求）：

ul:after{
  content: "";
  display: block;
  clear: both;
}
li {
  float: left;
  padding: 10px 15px;
  border-right: 1px solid #ff0000;
  color: #1F222B;
}
/* 移除最后一个li的右边框 */
li:last-child {
  border-right: none;
}
/* 第一个li设置蓝色右边框 */
li:nth-child(1) {
  border-right: 1px solid #00b2ff;
}
li:hover {
  border-right: 1px solid #F3EFF2;
  background: #1F222B;
  color: #F3EFF2;
}

这个方案不仅能解决你的选择器问题，还能保证页面的兼容性和可维护性，是最优解。

方案2：在现有结构下实现需求（不推荐，但满足你的前提） #

如果你一定要保留<a>包裹<li>的结构，那我们得把选择器的目标转向<ul>的直接子元素<a>，再控制里面的<li>：

<ul>
  <a href="#"><li>Solutions</li></a>
  <a href="#"><li>Industries</li></a>
  <a href="#"><li>Resources</li></a>
  <a href="#"><li>Partners</li></a>
  <a href="#"><li>About</li></a>
  <a href="#" class="button"><li>Enterprise</li></a>
</ul>

对应的CSS：

ul:after{
  content: "";
  display: block;
  clear: both;
}
/* 把浮动从li转移到a上，因为a是ul的直接子元素 */
ul > a {
  float: left;
}
li {
  padding: 10px 15px;
  border-right: 1px solid #ff0000;
  color: #1F222B;
}
/* 选中ul的最后一个a子元素，移除其内部li的右边框 */
ul > a:last-child li {
  border-right: none;
}
/* 选中ul的第一个a子元素，给其内部li设置蓝色右边框 */
ul > a:first-child li {
  border-right: 1px solid #00b2ff;
}
li:hover {
  border-right: 1px solid #F3EFF2;
  background: #1F222B;
  color: #F3EFF2;
}

这里的关键是把浮动从<li>转移到<a>上，然后通过选择<ul>的子元素<a>的伪类来控制内部<li>的样式，这样就能实现你要的效果。不过再次提醒，这个结构不符合HTML规范，可能在不同浏览器出现解析差异，长期维护风险高，优先选方案1。

内容的提问来源于stack exchange，提问作者M Shahzeb Raza