如何移除第一个列表项的左侧边框？已尝试:first-child但无效

你的代码逻辑本身没问题，但可能是选择器优先级或HTML结构细节导致:first-child未生效，以下是几种可靠的修复方案：

方案1：增强选择器特异性 #

如果页面中存在其他同优先级的CSS规则覆盖了设置，通过更精确的选择器可以确保样式生效：

/* 指定ul的直接子元素li，避免嵌套元素干扰 */
.banner-cards > li:first-child {
  border-left: 0;
}

也可以结合列表项的类名进一步明确目标：

.banner-cards li.menu-item:first-child {
  border-left: 0;
}

方案2：改用:first-of-type选择器 #

如果HTML中<ul>标签内存在隐形文本节点（比如多余的换行、空格被浏览器解析成文本节点），:first-child会匹配到文本节点而非第一个<li>，此时改用:first-of-type更稳妥：

.banner-cards li:first-of-type {
  border-left: 0;
}

方案3：给第一个列表项添加专属类 #

以上方法都不生效时，直接给目标<li>加类是最直接的解决方式：

修改后的HTML #

<li class="menu-item first-card" data-image="image-1">
    <a href="#">Hotel</a>
</li>

添加对应CSS #

.banner-cards li.first-card {
  border-left: 0;
}

验证生效的完整代码 #

以下是调整后可正常运行的代码示例：

CSS #

.container {
    width: 100%;
}
.banner-cards {
    display: flex;
    text-align: center;
    border-top: 1px solid rgba(249,2,0,.5);
 }

.banner-cards li {
    padding: 3rem 1.5rem;
    gap: .56rem;
    display: flex;
    flex-direction: column;
    width: 33%;
    border-left: 1px solid rgba(249,2,0,.5);
    margin-right: 0;
}

/* 采用直接子元素选择器确保优先级 */
.banner-cards > li:first-child {
  border-left: 0;
}

.banner-cards li a {
    font-size: 28px;
    line-height: 2.25rem;
    color: red;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .125em;
    text-decoration: none;
}

HTML #

<div class="container">
   <ul class="banner-cards">
       <li class="menu-item" data-image="image-1">
            <a href="#">Hotel</a>
        </li>
        <li class="menu-item" data-image="image-2">
            <a href="#">Membership</a>
        </li>
        <li class="menu-item" data-image="image-3">
            <a href="#">Meetings</a>
         </li>
      </ul>
  </div>

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