CSS边框仅应用于第一个列表项的解决方法
在开发网页时，我们经常会遇到为列表项添加边框的需求，但有时候会发现边框只应用到了第一个列表项上，其他的列表项都没有生效。这种情况通常和CSS选择器的使用、元素默认样式或者样式覆盖有关，下面我们就来逐一分析常见原因并给出对应的解决方法。
常见原因一：错误地使用了:first-child选择器
很多开发者在写CSS时，可能会不小心选中了:first-child，导致只有第一个列表项被添加了边框。比如下面的错误示例：
/* 错误示例：只给第一个li添加边框 */
ul li:first-child {
border: 1px solid #333;
}上面的代码中，:first-child选择器只会匹配到父元素下的第一个子元素，所以只有第一个<li>会拥有边框。如果要给所有列表项添加边框，只需要去掉:first-child即可：
/* 正确示例：给所有li添加边框 */
ul li {
border: 1px solid #333;
}常见原因二：列表项存在默认样式覆盖
部分浏览器会给<ul>、<li>元素设置默认的padding、margin或者list-style样式，有时候这些默认样式会和自定义的边框样式产生冲突，导致后面的列表项边框看起来没有生效。这时候我们可以先重置列表的默认样式，再添加边框：
/* 重置ul和li的默认样式 */
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* 给所有列表项添加边框 */
ul li {
border: 1px solid #333;
padding: 8px 12px; /* 添加内边距让边框和内容有间隔 */
margin-bottom: 10px; /* 列表项之间增加间距 */
}常见原因三：边框被相邻元素覆盖
如果列表项之间设置了负的margin，或者后面的列表项有更高的z-index值，可能会导致前面的边框被覆盖，看起来只有第一个列表项有边框。这时候可以调整margin值，或者给列表项设置合适的z-index：
ul li {
border: 1px solid #333;
padding: 8px 12px;
margin-bottom: 10px;
position: relative; /* 如果需要设置z-index，需要开启定位 */
z-index: 1;
}
/* 避免相邻元素覆盖边框 */
ul li + li {
margin-top: -1px; /* 可选：让相邻边框重叠，避免双倍边框 */
}完整示例演示
下面是一个完整的HTML和CSS示例，实现了给所有列表项添加边框的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表项边框示例</title>
<style>
/* 重置列表默认样式 */
.list-container {
margin: 20px;
padding: 0;
list-style: none;
}
/* 给所有列表项添加边框 */
.list-container li {
border: 1px solid #4a90e2;
padding: 10px 15px;
margin-bottom: 8px;
border-radius: 4px; /* 可选：添加圆角 */
}
/* 最后一个列表项去掉底部间距 */
.list-container li:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<ul class="list-container">
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
<li>第四个列表项</li>
</ul>
</body>
</html>运行上面的代码，你会发现所有列表项都正确显示了边框，不会出现只有第一个列表项有边框的问题。如果遇到类似问题，可以先检查自己的CSS选择器是否正确，再排查样式覆盖和默认样式的影响，就能快速定位并解决问题。