Наследование CSS некорректно работает для вкладок

ProgramBox

Наследование CSS некорректно работает для вкладок

Post author:admin
Запись опубликована:28 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css — файл

Вопрос:

У меня есть довольно простой CSS-код для моих вкладок. Проблема в том, что я добавляю это как часть более широкой базы CSS, и я продолжаю перезаписывать его по умолчанию. Например, у меня есть * { font-size: 8pt; } , который внедряется в мой новый добавленный CSS.

 /*
@import url('https://fonts.googleapis.com/css?family=Roboto');
*/

/*
@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
*/

/*
body {
    font-family: 'Roboto', sans-serif;
}
*/

.tabsWrapper {
    text-align: center;
    margin: 50px auto;
    font-family: 'Roboto', sans-serif !important;
}

.tabs {
    font-family: 'Roboto', sans-serif !important;
    margin-top: 50px;
    font-size: 15px;
    padding: 0px;
    list-style: none;
    background: #fff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    /*
    display: inline-block;
*/
    /*
    border-radius: 50px;
*/
    position: relative;
}

.tabs a {
    text-decoration: none;
    color: #777;
    text-transform: uppercase;
    padding: 10px 20px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition-duration: 0.6s;
}

.tabs a.active {
    color: #fff;
}

.tabs a i {
    margin-right: 5px;
}

.tabs .selector {
    display: none;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    /*
    border-radius: 50px;
    */
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: #05abe0;
    background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
    background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
    background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}

.tabs-content {
    display: none;
}

.tabs-content.active {
    display: block;
}```
/*
@import url('https://fonts.googleapis.com/css?family=Roboto');
*/

/*
@import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
*/

/*
body {
    font-family: 'Roboto', sans-serif;
}
*/

.tabsWrapper {
    text-align: center;
    margin: 50px auto;
    font-family: 'Roboto', sans-serif !important;
}

.tabs {
    font-family: 'Roboto', sans-serif !important;
    margin-top: 50px;
    font-size: 15px;
    padding: 0px;
    list-style: none;
    background: #fff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    /*
    display: inline-block;
*/
    /*
    border-radius: 50px;
*/
    position: relative;
}

.tabs a {
    text-decoration: none;
    color: #777;
    text-transform: uppercase;
    padding: 10px 20px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition-duration: 0.6s;
}

.tabs a.active {
    color: #fff;
}

.tabs a i {
    margin-right: 5px;
}

.tabs .selector {
    display: none;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    /*
    border-radius: 50px;
    */
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: #05abe0;
    background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
    background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
    background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}

.tabs-content {
    display: none;
}

.tabs-content.active {
    display: block;
}

 <body>
    <div class="tabsWrapper">
        <div class="tabs">
            <div class="selector"></div>
            <a href="javascript:void(0)" class="active" data-id="Tab-40w1lgn2"><i class="fas fa-bomb">Test
                </i>
            </a>
            <a href="javascript:void(0)" data-id="Tab-w2mo0zn9"><i class="fas fa-bomb">Test5
                </i>
            </a>
        </div>
    </div>
</body>

Насколько я понимаю, если я добавлю !Важно для tabs CSS убедиться, что все, что находится ниже tabs, получает эту настройку, включая A / I и так далее. Но это не работает. Это работает, только если я уменьшу размер шрифта до элемента / I, который мне не нужен. Я хотел бы убедиться, что настройки правильно переходят к приведенным ниже элементам. Какой самый простой способ?

Ответ №1:

Универсальный селектор будет применен к каждому элементу. Даже если размер шрифта установлен на .tabs , * для a и i дочерних элементов снова будет установлен размер шрифта.

Если вы хотите иметь правильное наследование, используйте

 body {
  font-size: 8pt;
}

Это сохранит 8pt размер до тех пор, пока элемент не определит другой размер.

Еще немного информации здесь

1. Итак, если я буду избегать * {} моего предположения о том, что все, что находится под вкладками, получит надлежащий стиль, верно?

2. пока нет других, более специфичных селекторов для дочерних элементов, да

Ответ №2:

Может быть, это потому, что ваш include: @import url('https://fonts.googleapis.com/css?family=Roboto'); закомментирован?