樣式的繼承
定義：父元素設(shè)置了某屬性，子元素也會(huì)有該屬性
下面是會(huì)被繼承的CSS樣式屬性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
文本相關(guān)屬性：
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent, texttransform,word-spacing
列表相關(guān)屬性：
list-style-image, list-style-position,
list-style-type, list-style
樣式的覆蓋
規(guī)則：
-
根據(jù)引入方式確定優(yōu)先級(jí)
優(yōu)先級(jí)由高到低依次為：“內(nèi)聯(lián)屬性”——>“寫在 style標(biāo)簽里”——>“外部鏈接” -
后寫的覆蓋先寫的（同一級(jí)別）
即就是在文件上代碼行號(hào)更靠下的優(yōu)先級(jí)更高 -
加有“！important”的樣式，優(yōu)先級(jí)最高
即無論哪一種情況，只要在樣式上加了important,那么該樣式的優(yōu)先級(jí)最高。加了important的代碼如下：
p {
color: white !important;
}
-
選擇器優(yōu)先級(jí)
在選擇器不同的情況下，給每種選擇器制定一個(gè)權(quán)值，計(jì)算命中一個(gè)元素的所有選擇器的總權(quán)值，值高者獲勝
- 元素選擇器： 1
- 類選擇起器： 10
- ID選擇器： 100
- 內(nèi)聯(lián)選擇器： 1000
樣式繼承與覆蓋示例
- 樣式繼承不是一個(gè)默認(rèn)行為，實(shí)際上而是看某一個(gè)屬性的默認(rèn)值是否是inherit。 所謂的瀏覽器默認(rèn)樣式。a標(biāo)簽的color瀏覽器默認(rèn)樣式不是inherit。代碼如下所示：
.abstract{
color:grey;
}
.abstract a{
color:inherit;
text-decoration:none;
border:thin black solid;
}
.different {
color: red ;
}
.different a{
text-decoration: none ;
border:thin black solid;
}
執(zhí)行效果如下圖：
demo1.png
詳細(xì)代碼[點(diǎn)這里](https://github.com/tw-lab-roadmap-1/YangHuili-task2-homework2/tree/master/demo1)
- 前面講到外部文件引用css的優(yōu)先級(jí)比style標(biāo)簽里的低。 但是id選擇器的優(yōu)先級(jí)是比元素選擇器要高的。所以當(dāng)元素選擇器和id選擇器都命中同樣的元素的時(shí)候， id選擇器的樣式會(huì)覆蓋元素選擇器的樣式。
代碼如下：
h1{
color:red;
}
#change{
color:blue;
}
執(zhí)行效果如下：
demo2.png
詳細(xì)代碼點(diǎn)這里
- 我們知道內(nèi)聯(lián)樣式的優(yōu)先級(jí)是最高的，那么當(dāng)元素已經(jīng)被內(nèi)聯(lián)樣式設(shè)置的時(shí)候。我們通過 !important 來覆蓋。代碼如下：
<body>
<h1 id="change" style="color: grey">
HelloWord，你看到的是已經(jīng)經(jīng)歷過三次變換的文字。
</h1>
</body>
h1{
color: red;
}
#change{
color:black !important
}
執(zhí)行效果如下：
demo3.png
詳細(xì)代碼點(diǎn)這里
- 若給一種元素設(shè)置了普適的效果，如何通過更精確的選擇器將其覆蓋掉，代碼如下：
a{
color:black;
}
a.hehe{
color:white;
background:grey;
}
詳細(xì)代碼點(diǎn)這里
- 當(dāng)一個(gè)元素有兩個(gè)class的時(shí)候，到底哪個(gè)class會(huì)影響 元素呢， 代碼如下：
a.hehe1{
color:black;
}
a.hehe2{
color:white;
background:grey;
}
文件上代碼行號(hào)更靠下的優(yōu)先級(jí)更高,即后寫的覆蓋先寫的。
詳細(xì)代碼點(diǎn)這里
- 讓span繼承abstract的border屬性。代碼如下：
.abstract{
color:white;
background:grey;
border:medium black solid;
}
span{
border:inherit
}
如上所示，將span 的 border 屬性設(shè)為“inherit”，span 就會(huì)繼承父元素的樣式。
詳細(xì)代碼點(diǎn)這里
