我想删除第一个列表项上的边框,边框样式很好,只是为了删除第一个.我试过使用第一个子元素的 Select 器,但它不起作用,可能遗漏了什么.

.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;
    padding: 3rem 1.5rem;
}

.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;
}
<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>

推荐答案

你可以用CSS来做这个

.banner-cards li:first-child {
    border-left: none;
}

如果你删除双(::),只使用一个(:),它应该工作.

Html相关问答推荐

将容器水平偏离中心放置在桌面上;在移动设备上平稳地集中缩小规模

弹性项在主轴方向溢出

卡片上方的文本

有没有一种方法可以用css和html在桌面上并排显示列,在移动设备上显示一个下方的列?

由于列中的图像,它们不会随FlexBox中的窗口大小进行调整

在 Select 前后更改选项卡的背景

如何防止第二列中的内容影响第一列中内容的位置?

为什么在添加文本时网格区域会调整大小?

我无法使用背景图像css,因为我在VS代码中将照片放在不同的文件夹中

在弹性框布局中的第n个元素后强制换行

在R中从网页上的特定iframe中提取图形数据

如何为高度较小的块制作边框动画?

可以通过悬停时的自定义区域更改文本属性吗?

如何调整边框半径以匹配父边框半径

在DIV上应用梯度模糊未如预期工作

Tailwind:父母动态适应子元素的身高

SVG 调整大小而不是溢出

自定义进度条 Html 和 CSS 布局

如何突出显示 .qmd html 文件中的特定代码行

在部分而不是正文中定义页面宽度