Question

我的标签页有相当简单的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>

我的理解是，如果为标签添加重要的CSS，它将确保所有标签下的内容都得到包括A / I等在内的设置。但这是行不通的。仅当我将字体大小向下移动到A / I元素（这不是我想要的元素）时，它才起作用。我想确保设置正确地归入以下元素。最简单的方法是什么？

Answer 1

通用选择器将应用于每个元素。即使在.tabs上设置了字体大小，*也会在a和i子级上再次设置字体大小。

如果您想拥有适当的继承，请使用

body {
  font-size: 8pt;
}

这将保持8pt的大小，直到元素定义另一个大小为止。

更多信息here

Answer 2

可能是因为您的包括：@import url('https://fonts.googleapis.com/css?family=Roboto');被注释掉了吗？

选项卡的CSS继承无法正常工作

2 个答案: