有辦法去掉從父級元素繼承下來的 CSS 樣式嗎

在div里給它加上一個類，給新加的類寫樣式。

創(chuàng)新互聯(lián)成立與2013年，先為漳平等服務(wù)建站，漳平等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為漳平企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

在CSS中，繼承是一種非常自然的行為，我們甚至不需要考慮是否能夠這樣去做，但是繼承也有其局限性。

首先，有些屬性是不能繼承的。這沒有任何原因，只是因為它就是這么設(shè)置的。舉個例子來說：border屬性，大家都知道，border屬性是用來設(shè)置元素的邊框的，它就沒有繼承性。如下圖所示，如果繼承了邊框?qū)傩裕敲次臋n看起來就會很奇怪，除非采取另外的措施關(guān)掉邊框的繼承屬性。

多數(shù)邊框類屬性，比如象Padding（補(bǔ)白），Margin（邊界），背景和邊框的屬性都是不能繼承的。

擴(kuò)展資料

CSS中的樣式覆蓋原則：

規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時，最近祖先獲勝（最近原則）。

strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍(lán)色。

規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時，直接指定的樣式獲勝（最直接原則）。

strong?{color:red;}

那么根據(jù)規(guī)則二，strong中的文字最終顯示為紅色。

規(guī)則三：直接指定的樣式發(fā)生沖突時，樣式權(quán)值高者獲勝。

樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表。

css選擇器?權(quán)值

標(biāo)簽選擇器?1

類選擇器?10

ID選擇器?100

內(nèi)聯(lián)樣式?1000

偽元素(:first-child等)?1

偽類(:link等)?10

可以看到，內(nèi)聯(lián)樣式的權(quán)值ID選擇器類選擇器標(biāo)簽選擇器，除此以外，后代選擇器的權(quán)值為每項權(quán)值之和，比如”#nav?.current?a”的權(quán)值為100?+?10?+?1?=?111。

如何更改CSS屬性，取消對父級元素的屬性繼承？

在div里給它加上一個類，給新加的類寫樣式。

繼承在CSS中是一種自然的行為，我們甚至不需要考慮是否可以這樣做，但它有其局限性。

首先，有些屬性不能被繼承。這是沒有原因的，因為它是這樣建立的。例如，您都知道，border屬性用于設(shè)置元素的邊界，因此它沒有繼承。

如下圖所示，如果繼承了border屬性，那么文檔將看起來很奇怪，除非您采取其他措施來關(guān)閉border的繼承屬性。大多數(shù)邊框?qū)傩裕缣畛洹⒖瞻住⒈尘昂瓦吙颍疾皇抢^承的。

擴(kuò)展資料：

CSS中的樣式優(yōu)先原則：

規(guī)則1：當(dāng)由于繼承而發(fā)生樣式?jīng)_突時，最近的祖先獲勝（最近的原則）。

Strong分別從body和p繼承了color屬性，但是因為p在繼承樹中更接近Strong，所以Strong中的文本最終繼承了p的藍(lán)色。

規(guī)則2：當(dāng)繼承的樣式與直接指定的樣式?jīng)_突時，直接指定的樣式獲勝（最直接的原則）。

強(qiáng)大的｛顏色：紅色；｝

根據(jù)規(guī)則二，用strong表示的文本以紅色結(jié)尾。

規(guī)則3：當(dāng)直接指定的樣式?jīng)_突時，具有最高樣式權(quán)重的樣式將獲勝。

該值取決于樣式的選擇，權(quán)重定義見下表。

CSS選擇器的重量

標(biāo)簽選擇器1

類選擇器10

ID選擇器100

內(nèi)聯(lián)樣式1000

偽元素（：第一個子元素，等等

偽類（：鏈接等

可以看到，行內(nèi)樣式的權(quán)重是、ID選擇器、、b類選擇器、、標(biāo)簽選擇器，除了子類選擇器外，權(quán)重是每個權(quán)重的和，比如“# nav”。電流a“重100 + 10 + 1 = 111”。

vue里面父組件修改子組件樣式的方法

在使用

vue

的開發(fā)中，我們有時會引用外部組件，包括

UI

組件（ElementUI、iview）。

當(dāng)

style

標(biāo)簽有

scoped

屬性時，它的

CSS

只作用于當(dāng)前組件中的元素。

但是在父組件中添加

scoped

之后，父組件的樣式將不會滲透到子組件中，所以在父組件中書寫子組件的樣式是無效果的。

一、去掉

scoped

在父組件的

style

中去掉

scoped

后，父組件中可以書寫子組件的樣式，但是你會擔(dān)心這樣會污染全局樣式。

【因為我們知道正確使用全局樣式的姿勢是使用一個全局的

app.css】

二、混用本地和全局樣式

你可以在一個組件中同時使用有作用域和無作用域的樣式：

style

/*

全局樣式

*/

/style

style

scoped

/*

本地樣式

*/

/style

我們把

需要修改子組件的樣式

寫在上面那個全局樣式里面

三、使用深度作用選擇器

如果你希望

scoped

樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用

操作符：

style

scoped

.a

.b

{

/*

...

*/

}

/style

有些像

SASS

之類的預(yù)處理器無法正確解析

。這種情況下你可以用

/deep/

操作符取而代之

——

這是一個

的別名，同樣可以正常工作。

OK，主要內(nèi)容就是以上幾點(diǎn)。

需要額外補(bǔ)充的是：

1、通過

v-html

創(chuàng)建的

DOM

內(nèi)容不受作用域內(nèi)的樣式影響，但是你仍然可以通過深度作用選擇器來為他們設(shè)置樣式

2、CSS

作用域不能代替

class

3、在遞歸組件中小心使用后代選擇器

以上這篇vue里面父組件修改子組件樣式的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:vue中element組件樣式修改無效的解決方法淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別Vue修改mint-ui默認(rèn)樣式的方法

新聞標(biāo)題：css修改父組件樣式,子組件修改父組件樣式
文章出自：http://chinadenli.net/article48/dsisphp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、App開發(fā)、小程序開發(fā)、網(wǎng)站導(dǎo)航、網(wǎng)站排名、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)