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

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

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

CSS中的優(yōu)先級(jí)大體是：內(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)建一個(gè)段落加上點(diǎn)文本看看字體顏色會(huì)發(fā)生什么變化

<p>Hello World!</p>

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

2、比如這段代碼

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

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

3、id與class同時(shí)使用

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

此時(shí)id覆蓋class，文本字體為orange。

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

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

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

5、如果你想某個(gè)樣式的某個(gè)變量不被覆蓋的話，可以在其后面加上！important來強(qiáng)制增加其的優(yōu)先級(jí)，但是只能加在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)知識(shí)。

css樣式覆蓋

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

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

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

最新評(píng)論