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

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

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

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

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

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

擴(kuò)展資料

CSS中的樣式覆蓋原則：

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

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

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

strong?{color:red;}

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

規(guī)則三：直接指定的樣式發(fā)生沖突時(shí)，樣式權(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)值為每項(xiàng)權(quán)值之和，比如”#nav?.current?a”的權(quán)值為100?+?10?+?1?=?111。

css的三大特性：層疊，繼承、優(yōu)先級(jí)以及權(quán)重的計(jì)算

三大特性：層疊性、繼承性、優(yōu)先級(jí)

相同選擇器給設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋（層疊）另一個(gè)沖突的樣式。層疊性主要解決樣式?jīng)_突問題。

在這里會(huì)顯示的顏色為pink，字體大小為20px。

子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式

在這里p標(biāo)簽會(huì)顯示紅字，20px。

行高的繼承

當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生

p為白色因?yàn)槔^承權(quán)重為0，無論父類是什么權(quán)重都不繼承。

所以如果要給a設(shè)置樣式就要單獨(dú)設(shè)置一個(gè)a的樣式。

這里顯示的為藍(lán)色，因?yàn)闄?quán)重大。

最終大豬蹄子的顏色為紅色，大肘子和豬尾巴為藍(lán)色。

怎么在css中繼承已有的css樣式？

比如a有如下的樣式：123456.a{????height:20px;????width:20px;????color:red;????margin:10px?20px;}

而b唯獨(dú)和a的樣式里顏色不同本應(yīng)該寫：123456.b{????height:20px;????width:20px;????color:blue;????margin:10px?20px;}

這時(shí)候你就可改寫：1234567891011.a,.b{????height:20px;????width:20px;????margin:10px?20px;}.a{????color:red;}.b{????color:blue;}

CSS是Cascading Style Sheet 的縮寫。譯作層疊樣式表單。是用于(增強(qiáng))控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。

你可以用以下三種方式將樣式表加入您的網(wǎng)頁。而最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。

每個(gè)屬性都有一個(gè)指定的值：Inherit。它的意思是:將父對(duì)象的值等同為計(jì)算機(jī)值得到。這個(gè)值通常僅僅是備用的。顯式的聲明它可用來強(qiáng)調(diào)。

CSS哪些樣式屬性可以繼承

所有元素可繼承：

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

塊狀樣式：

列表樣式：

表格樣式：

【8】CSS盒子模型、樣式繼承和默認(rèn)樣式

內(nèi)容 content ：盒子的主要區(qū)域，盒子中的文本內(nèi)容以及后代元素都顯示在內(nèi)容區(qū)域中。

內(nèi)邊距 padding ：內(nèi)容與盒子邊界的距離。

邊框 border ：邊框顯示在盒子的邊界上。

外邊距 margin ：盒子和相鄰兄弟元素或父元素的距離。

盒子的大小=內(nèi)容的大小+內(nèi)邊距的大小+邊框的大小

元素默認(rèn) 總寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距

元素默認(rèn) 內(nèi)容寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距 - 元素自己的左右邊框?qū)挾?- 元素自己的左右內(nèi)邊距

如何實(shí)現(xiàn)CSS 類繼承呢

所謂css的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個(gè)網(wǎng)頁的樣式預(yù)設(shè)，需要指定為其它樣式的部份設(shè)定在個(gè)別元素里即可。這項(xiàng)特性可以給網(wǎng)頁設(shè)計(jì)者提供更理想的發(fā)揮空間。。css是層疊樣式表(cascading style sheets)的簡(jiǎn)稱。

一、繼承

css的一個(gè)主要特征就是繼承，它是依賴于祖先-后代的關(guān)系的。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代。例如一個(gè)body定義了的顏色值也會(huì)應(yīng)用到段落的文本中。下面舉例說明：

樣式定義：

body{color:red;}

應(yīng)用舉例代碼：

pcss的strong層疊和繼承/strong深入探討/p

這段代碼的應(yīng)用結(jié)果是：“css的層疊和繼承深入探討”這段話是紅顏色的，“層疊和繼承”由于應(yīng)用了strong元素，所以是粗體。這很符合制作者的意圖，也是為什么繼承是css的一部分的原因。

二、css繼承的局限性

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

首先，有些屬性是不能繼承的。這沒有任何原因，只是因?yàn)樗褪沁@么設(shè)置的。舉個(gè)例子來說：border屬性，大家都知道，border屬性是用來設(shè)置元素的邊框的，它就沒有繼承性。多數(shù)邊框類屬性，比如象padding(補(bǔ)白)，margin(邊界)，背景和邊框的屬性都是不能繼承的。

三、繼承中容易引起的錯(cuò)誤

有時(shí)候繼承也會(huì)帶來些錯(cuò)誤，比如說下面這條css定義：

body{color:blue}

在有些瀏覽器中這句定義會(huì)使除表格之外的文本變成藍(lán)色。從技術(shù)上來說，這是不正確的，但是它確實(shí)存在。所以我們經(jīng)常需要借助于某些技巧，比如將css定義成這樣：

body,table,th,td{color:blue}

這樣表格內(nèi)的文字也會(huì)變成藍(lán)色。

四、多種樣式混合應(yīng)用

既然有了繼承性，那么在樣式表中的應(yīng)用上可能會(huì)有些讀者搞不清，多個(gè)樣式表同時(shí)應(yīng)用到一個(gè)對(duì)象上會(huì)發(fā)生什么情形呢？先舉個(gè)簡(jiǎn)單的例子：

樣式定義：

.apple{color:red;}h1{color:yellow;}

應(yīng)用舉例代碼：

h1 class="apple"這兒的蘋果好紅啊/h1

應(yīng)用舉例效果：因?yàn)檫x擇符h1和.apple都匹配上面的h1元素，那么到底瀏覽器會(huì)應(yīng)用哪一個(gè)呢？通過在瀏覽器中觀察，我們發(fā)現(xiàn)這段文字應(yīng)用了.apple這個(gè)樣式，所以它顯示的是紅色。這是因?yàn)閮蓷l規(guī)則的特殊性不一樣，css規(guī)則必須這樣進(jìn)行處理。

樣式表中的特殊性描述了不同規(guī)則的相對(duì)權(quán)重，它的基本規(guī)則是：

統(tǒng)計(jì)選擇符中的id屬性個(gè)數(shù)。

統(tǒng)計(jì)選擇符中的class屬性個(gè)數(shù)。

統(tǒng)計(jì)選擇符中的html標(biāo)記名格式。

最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)。( 注意，你需要將數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。

以下是一個(gè)按特性分類的選擇符的列表：

h1 {color:blue;}特性值為：1

p em {color:purple;}特性值為：2

.apple {red;}　 特性值為：10

p.bright {color:yellow;} 特性值為：11

p.bright em.dark {color:brown;}　 特性值為：22

#id316 {color:yellow}　 特性值為：100

從上表可以看出#id316具有更高的特殊性，因而它有更高的權(quán)重。當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí)，權(quán)重越高的樣式將被優(yōu)先采用。

五、css繼承的優(yōu)先級(jí)問題

上面我們討論了css的繼承性和特殊性，在特殊性的框架下，被繼承的特性值為0，這就意味著任何顯示聲明的規(guī)則將會(huì)覆蓋其繼承樣式。因此，不管一條規(guī)則具有多高的權(quán)重，如果沒有其他規(guī)則能應(yīng)用于這個(gè)繼承元素，那么它也只是個(gè)被繼承的規(guī)則而已，舉例說明。

樣式定義：

body { background:black;}

li { color:gray;}

ul.white { color:white}

應(yīng)用舉例代碼：

ul

li舉例列表一/li

li舉例列表二/li

li舉例列表三/li

li舉例列表四/li

/ul

有些讀者可能認(rèn)為除包含.white類的列表項(xiàng)顯示為白色外，其余所有的列表項(xiàng)都應(yīng)該是灰色的。然而情況并非如此。因?yàn)閹нx擇符li的顯式聲明的權(quán)值比從ul.white規(guī)則那里繼承過來的權(quán)值要大，所以每個(gè)列表項(xiàng)都是灰色的。

下面再來看一個(gè)例子，若給定如下所示的標(biāo)記，則em強(qiáng)調(diào)文字將會(huì)是灰色的，而非黑色，因?yàn)閑m規(guī)則的權(quán)值要大于從h1元素繼承來的權(quán)值：

樣式定義：

h1#id316 { color:black;} 　特性值為：101

em { color:gray;} 特性值為：1

應(yīng)用舉例代碼：

h1 id="id316"深入探討emcss的繼承性/em/h1

這是因?yàn)榈诙lem規(guī)則的特性值(1)要比被繼承的特性值(0)要大，事實(shí)上規(guī)定h1#id316的原始特性值(101)對(duì)其繼承值沒有影響，仍舊為0。

小技巧：

如果想讓h1始終為黑色，而em文字在其他情況下紅色，那么下面的樣式表設(shè)置就是一個(gè)很好的方法：

h1,h1 em { color:black;} 特性值為：1，2

em { color:red;}　特性值為：1

給定這個(gè)規(guī)則后，除在h1元素內(nèi)的任何em文字就都是紅色，而h1內(nèi)的em文字仍舊為黑色，由于其選擇符分組，在第一條規(guī)則中就有兩條有效的規(guī)則(一條是對(duì)h1的，另一條是對(duì)h1 em的)也就有兩個(gè)特性值--每條規(guī)則一個(gè)。

六、人為定義css繼承優(yōu)先級(jí)

在制作網(wǎng)頁的過程中，我們可能想要設(shè)置某個(gè)規(guī)則比其他的規(guī)則更重要，css中允許這樣設(shè)置，它們被稱為重要規(guī)則(important rule)。這是根據(jù)其聲明的方式和它們的自然屬性來命名的。通過在一條規(guī)則的分號(hào)前插入!important這樣一個(gè)短語來標(biāo)記一條重要規(guī)則，比如說：

p.apple { color:#red !important; background:white;}

顏色值#red被標(biāo)記為!important，而背景色white未被標(biāo)記，如果需要二條規(guī)則都是重要的話，那么每條規(guī)則都需要標(biāo)上!important。

正確地放置!important的位置是很重要的，否則整條規(guī)則將為無效。!important總是放在規(guī)則聲明的最后，在分號(hào)之前。

標(biāo)記為!important的規(guī)則具有最高的權(quán)值，也就是說他沒有具體的特性值，但是比其他的權(quán)值都要大。需要注意的是，雖然制作者定義的樣式比用戶定義的樣式具有更高權(quán)值時(shí)，但!important規(guī)則恰恰相反：重要的用戶定義規(guī)則要比制作者定義的樣式具有更高權(quán)值，即使是標(biāo)記為!important的重要規(guī)則也是如此。

看了這么多文字介紹后，我們來舉個(gè)例子看一下：

樣式定義：

h1 { color:gray !important;}

應(yīng)用舉例代碼：

h1 style="color:black;"看這兒！/h1

應(yīng)用舉例效果:!important規(guī)則會(huì)覆蓋內(nèi)聯(lián)style屬性的內(nèi)容，所以結(jié)果文字是灰色的而不是黑色的。

還有最后一種需要考慮的情況：繼承值總是具有特性值0的特點(diǎn)，即使是從帶有!important的規(guī)則繼承的值也是如此，在匹配重要規(guī)則的元素之外，重要性也會(huì)隨之消失

分享文章：css樣式繼承,css樣式繼承性
網(wǎng)站鏈接：http://chinadenli.net/article32/dsesipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站收錄、軟件開發(fā)、品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管、全網(wǎng)營銷推廣

廣告

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