删除Bootstrap 4中的border-radius列表组项

Question

我是bootstrap的新手，并且已经使用我的自定义CSS类超越了bootstrap border-radius属性。

.border-radius-none{
    border-radius: 0;
}

图像：

这适用于所有情况，但在骑乘list-group-item时，第一个和最后一个元素不会被覆盖。

1. 我的主要css链接在bootstrap css下面（如下面的代码段所示）
2. 阅读有关CSS特异性的article，这对我没有帮助。

我尝试过的事情

1. 将!important添加到我的css。

有没有其他方法可以删除bootstrap border-radius默认值，而不使用重要的？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
<link href="./Main.css" rel="stylesheet">


<li class="list-group-item bg-black white-text border-none">
    <div class="row">
        <div class="col-9"> Latest Jobs </div>
        <div class="col-3">
            <a href="#" class="mr-auto">View all</a>
        </div>


    </div>
</li>

Answer 1

根据将class="rounded-0"设置为border-radius的文档0，某些类在bootstrap中预定义了

https://getbootstrap.com/docs/4.0/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
   <ul class="list-group">
     <li class="list-group-item rounded-0">Cat</li>
     <li class="list-group-item rounded-0">Dog</li>
     <li class="list-group-item rounded-0">Rabbit</li>
     <li class="list-group-item rounded-0">Alpaca</li>
   </ul>
 </div>

Answer 2

将此类添加到您的css以覆盖.list-group-item或.list-group-item:last-child，并在boostrap css链接后将链接放置到您的css

    .list-group-item{
                border-radius: 0;
     }

或

.list-group-item:last-child{
                border-radius: 0;
     }

Answer 3

而不是使用.border-radius-none{ border-radius: 0; }

使用.border-radius-none{ border-radius: none; }

如果您不想添加！重要，请尝试指定类使用.classname>.innerclass{border:none;}

Answer 4

这是写border-radius的其他方法：0;内联

af[TAB]

.list-group-item
{
    border-radius: 34px;
}

Answer 5

您可以查看Calculating CSS Specificity Value

.list-item-group：first-child为0,0,2,0（class * 1 + psuedo-class * 1）

• .list-item-group：0,0,1,0
• ：first-child：0,0,1,0

.border-none是0,0,1,0（class * 1）

你有多种方法可以加上你的CSS特异性值，简单的方法是使用两个类

.border-none,
.border-none.list-group-item {
   border-radius : 0;
}

<li class="list-group-item bg-black white-text border-none">
    <div class="row">
        <div class="col-9"> Latest Jobs </div>
        <div class="col-3">
            <a href="#" class="mr-auto">View all</a>
        </div>


    </div>
</li>