如何覆盖标记-引导css scaffolding.less

Question

我不能使用自己的样式覆盖HTML标记。例如，如果我为hr标记添加新的css规则，那么我会看到这两个规则。我想使用我的定制规则。

html

            <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <style type="text/css">

                p {
                    font-size: 12px;
                    width: 150px;
                    display: inline-block;
                    margin-left: 18px;
                }
                .testbox {
                    margin: 20px auto;
                    width: 343px;
                    height: 244px;
                    -webkit-border-radius: 8px/7px;
                    -moz-border-radius: 8px/7px;
                    border-radius: 8px/7px;
                    background-color: #ebebeb;
                    -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
                    -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
                    box-shadow: 1px 2px 5px rgba(0,0,0,.31);
                    border: solid 1px #cbc9c9;
                }

               .box1 {
                    color: #a9a9a9;
                    opacity: 0.3;
                }
              </style>

<div class="testbox">
    <h1>Registration</h1>
    <form action="/">
        <hr class="box1">
        <label id="icon" for="name"><i class="icon-envelope "></i></label>
        <input type="text" name="name" id="name" placeholder="Email" required/>
        <label id="icon" for="name"><i class="icon-user"></i></label>
        <input type="text" name="name" id="name" placeholder="Kod" required/>
        <p>By clicking Register, you agree on our <a href="#">terms and condition</a>.</p>
        <a href="#" class="button">Register</a>
    </form>
</div>

有可能这么做吗？

Answer 1

为了覆盖样式，需要在类选择器中指定需要覆盖的所有样式。或者使用通用元素选择器来覆盖。

例如：

hr {
    ...
}

一种更有力的办法是：

hr {
    all: unset;
}

女巫将所有样式重置为inherent或initial

Answer 2

引导程序将以下规则添加到<hr>，作为其框架的一部分：

margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0,0,0,.1);

box-sizing: content-box;
height: 0;
overflow: visible;

如果不希望应用这些规则(但仍然希望使用引导)，则必须覆盖不希望应用的每条规则。在这方面，您始终可以将单个属性设置为默认值，这将给您与Bootstrap在一开始没有将它们的样式应用于标记时一样的效果。这可以通过设置initial值来完成。

值得注意的是，您需要应用更多的，而不是Bootstrap。引导程序只应用根hr样式，因此您的.box1规则应该由于更高的专用性而重写它。但是，如果需要的话，可以使用类似于hr.box1的东西来增加这个值。

还值得注意的是，color不适用于，而不是应用于<hr>元素；您需要在border-top的rgb()值中设置颜色。

可以看到选择器.box1覆盖了Bootstrap的hr颜色，如下所示：

​

/* Bootstrap

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

*/

.box1 {
  border-top: 1px solid rgba(255,0,0);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<hr class="box1">

​