Как переопределить теги - bootstrap css scaffolding.less

Question

Я не могу переопределить теги HTML, используя мои собственные стили. Например, если я добавлю новое правило css для тега hr , я увижу оба правила. Я хочу использовать свое пользовательское правило.

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

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;

, если вы не хотите применять эти правила (но все еще хотите использовать Bootstrap), тогда вы должны перезаписать каждое правило, которое вы не хотите применять. В этом случае вы всегда можете установить для индивидуального свойства значение по умолчанию , что даст вам тот же эффект, что и для Bootstrap, не применившего стиль к тегу в первую очередь. Это можно сделать, установив значение initial.

Стоит отметить, что вам необходимо применить больше специфичности , чем Bootstrap. Bootstrap применяет только стиль root 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">

Answer 2

чтобы переопределить стиль, вам нужно указать все стили, которые нужно переопределить, в селекторе классов. или используйте общий селектор элементов для переопределения.

например,

hr {
    ...
}

. Более мощный подход заключается в следующем:

hr {
    all: unset;
}

, который сбрасывает все стили до inherent или initial