在頁面中，我們常用id、class以及內(nèi)聯(lián)樣式表來設(shè)置我們的組件CSS。有時候我們?yōu)榱司幋a的簡便會使用CSS庫，這些庫會設(shè)置好全局的CSS，但是有某幾個組件我們不想使用CSS庫中定義的樣式而想用別的特別的樣式怎么辦呢？

使用自定的CSS樣式覆蓋之前的CSS樣式就可以解決這種情況。

在網(wǎng)頁中css樣式根據(jù)css優(yōu)先級來使用，優(yōu)先級高的會覆蓋優(yōu)先級低的css樣式。

CSS中的優(yōu)先級大體是：內(nèi)聯(lián)樣式>id引用>class引用

示例：

< style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.class1 {
color: pink ;
}
.class2 {
color: blue;
}
< /style>

上述css樣式說明：

1、我們來創(chuàng)建一個段落加上點文本看看字體顏色會發(fā)生什么變化

<p>Hello World!</p>

首先不指定id和class，字體默認為body中的樣式，為green

2、比如這段代碼

<p class="class1 class2" >Hello World!</p>

這段文本會同時繼承class1、class2中的樣式，但是當這兩個類中有相同的變量時，class間有沖突時，優(yōu)先使用后者的定義，所以此時文本字體為blue。

3、id與class同時使用

<p class="class1 class2" id="orange-text">Hello World!</p>

此時id覆蓋class，文本字體為orange。

4、id、class與內(nèi)聯(lián)樣式同時使用

<p class="class1 class2" id="orange-text" style="color:whitle">Hello World!</p>

此時內(nèi)聯(lián)樣式表覆蓋id和class，文本字體為white。

5、如果你想某個樣式的某個變量不被覆蓋的話，可以在其后面加上！important來強制增加其的優(yōu)先級，但是只能加在id、class中。比如在#orange-text中的color后面加上！important：

#orange-text
{
color: orange ！important ;
}

<p class="class1 class2" id="orange-text" style="color:whitle">Hello World!</p>

這樣的話就算有內(nèi)聯(lián)樣式表設(shè)置color為white，color仍然為orange。

以上內(nèi)容到此結(jié)束，下面在看下CSS樣式覆蓋的相關(guān)知識。

css樣式覆蓋

樣式覆蓋：如果使用一些組建的時候，想要修改它的樣式，可以自己寫新的樣式去覆蓋原本的樣式，方法如下，見style中的三種寫法:

<template>
    <view class="custom-transition"></view>
</template>
<style>
/* 樣式強制覆蓋吧  */
.custom-transition {
    width:100px !important;
    height:100px !important;
    background-color:red !important;
}
</style>

到此這篇關(guān)于CSS樣式覆蓋的文章就介紹到這了,更多相關(guān)CSS樣式覆蓋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論