CSS的繼承性
我們來看下面這樣的代碼赌髓，來引入繼承性：
上方代碼中玉吁，我們給div標簽增加紅色屬性，卻發(fā)現(xiàn)偏竟，div里的每一個子標簽<p>也增加了紅色屬性窍株。于是我們得到這樣的結(jié)論：
有一些屬性民轴，當給自己設(shè)置的時候，自己的后代都繼承上了球订，這個就是繼承性后裸。
繼承性是從自己開始，直到最小的元素冒滩。
但是呢微驶，如果再給上方的代碼加一條屬性：
上圖中，我們給div加了一個border开睡，但是發(fā)現(xiàn)只有div具備了border屬性因苹，而p標簽卻沒有border屬性。于是我們可以得出結(jié)論：
關(guān)于文字樣式的屬性篇恒，都具有繼承性扶檐。這些屬性包括：color、 text-開頭的胁艰、line-開頭的款筑、font-開頭的智蝠。
關(guān)于盒子、定位奈梳、布局的屬性杈湾，都不能繼承。
以后當我們談到css有哪些特性的時候攘须，我們要首先想到繼承性漆撞。而且，要知道哪些屬性具有繼承性阻课、哪些屬性沒有繼承性叫挟。
CSS的層疊性
很多公司如果要筆試，那么一定會考層疊性限煞。
層疊性：計算權(quán)重
層疊性：就是css處理沖突的能力抹恳。 所有的權(quán)重計算，沒有任何兼容問題署驻！
CSS像藝術(shù)家一樣優(yōu)雅奋献，像工程師一樣嚴謹。
我們來看一個例子旺上，就知道什么叫層疊性了瓶蚂。
上圖中，三種選擇器同時給P標簽增加顏色的屬性宣吱，但是窃这，文字最終顯示的是藍色，這個時候征候，就出現(xiàn)了層疊性的情況杭攻。
當多個選擇器，選擇上了某個元素的時候疤坝，要按照如下順序統(tǒng)計權(quán)重：
- id 選擇器
- 類選擇器兆解、屬性選擇器、偽類選擇器
- 標簽選擇器跑揉、偽元素選擇器
因為對于相同方式的樣式表锅睛，其選擇器排序的優(yōu)先級為：ID選擇器 > 類選擇器 > 標簽選擇器
針對上面這句話，我們接下來舉一些復雜一點的例子历谍。
層疊性舉例
舉例1：計算權(quán)重
如上圖所示现拒，統(tǒng)計各個選擇器的數(shù)量，優(yōu)先級高的勝出望侈。文字的顏色為紅色印蔬。
PS：不進位，實際上能進位（奇淫知識點：255個標簽甜无，等于1個類名）但是沒有實戰(zhàn)意義扛点！
舉例2：權(quán)重相同時
上圖可以看到，第一個樣式和第二個樣式的權(quán)重相同岂丘。但第二個樣式的書寫順序靠后陵究，因此以第二個樣式為準（就近原則）。
舉例3：具有實戰(zhàn)性的例子
現(xiàn)在我要讓一個列表實現(xiàn)上面的這種樣式：第一個li為紅色奥帘，剩下的li全部為藍色铜邮。
如果寫成下面這種代碼是無法實現(xiàn)的：
無法實現(xiàn)的原因很簡單，計算一下三個選擇器的權(quán)重就清楚了寨蹋，顯然第二個樣式被第一個樣式表覆蓋了松蒜。
正確的做法是：（非常重要）
上圖中，第二個樣式比第一個樣式的權(quán)重要大已旧。因此在實戰(zhàn)中可以實現(xiàn)這種效果：所有人當中秸苗，讓某一個人為紅，讓其他所有人為藍运褪。
這種方式好用是好用惊楼，但用好很難。
就拿上方代碼來舉例秸讹，為了達到這種效果檀咙，即為了防止權(quán)重不夠，比較穩(wěn)妥的做法是：把第二個樣式表照著第一個樣式表來寫璃诀，在此基礎(chǔ)上弧可，給第二個樣式表再加一個權(quán)重。
上面這個例子很具有實戰(zhàn)性劣欢。
舉例4：繼承性造成的影響
這里需要聲明一點：
如果不能直接選中某個元素棕诵，通過繼承性影響的話，那么權(quán)重是0氧秘。
為了驗證上面這句話年鸳，我們來看看下面這樣的例子：
另外：如果大家的權(quán)重相同，那么就采用就近原則：誰描述的近丸相，聽誰的搔确。舉例如下：(box3 描述得最近，所以采用 box3 的屬性)
上方代碼的文字版如下：
<!DOCTYPE html>
<html lang="">
<head>
<meta />
<meta />
<meta />
<title>Document</title>
<style>
#box1 {
color: red;
}
#box2 {
color: green;
}
#box3 {
color: blue;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"><p>猜猜我是什么顏色</p></div>
</div>
</div>
</body>
</html>
層疊性：權(quán)重計算的問題大總結(jié)（非常重要）
層疊性灭忠。層疊性是一種能力膳算，就是處理沖突的能力。當不同選擇器弛作，對一個標簽的同一個樣式涕蜂，有不同的值，聽誰的映琳？這就是沖突机隙。css有著嚴格的處理沖突的機制蜘拉。
通過列舉上面幾個例子，我們對權(quán)重問題做一個總結(jié)有鹿。
上面這個圖非常重要旭旭，我們針對這個圖做一個文字描述：
- 選擇上了，數(shù)權(quán)重葱跋，(id的數(shù)量持寄，類的數(shù)量，標簽的數(shù)量)娱俺。如果權(quán)重一樣稍味，誰寫在后面聽誰的。
- 沒有選擇上荠卷，通過繼承影響的模庐，就近原則，誰描述的近聽誰的僵朗。如果描述的一樣近赖欣，比如選擇器權(quán)重，如果權(quán)重再一樣重验庙，誰寫在后面聽誰的顶吮。
CSS樣式表的沖突的總結(jié)
- 1、對于相同的選擇器（比如同樣都是類選擇器）粪薛，其樣式表排序：行級樣式 > 內(nèi)嵌樣式表 > 外部樣式表（就近原則）
- 2悴了、對于相同類型的樣式表（比如同樣都是內(nèi)部樣式表），其選擇器排序：ID選擇器 > 類選擇器 > 標簽選擇器
- 3违寿、外部樣式表的ID選擇器 > 內(nèi)嵌樣式表的標簽選擇器
總結(jié)：就近原則湃交。ID選擇器優(yōu)先級最大。
舉例：如果都是內(nèi)嵌樣式表藤巢，優(yōu)先級的順序如下：（ID 選擇器 > 類選擇器 > 標簽選擇器）
另外還有兩個沖突的情況：
- 1搞莺、對同一個標簽，如果用到的都是內(nèi)嵌樣式表掂咒，且權(quán)重一致才沧，那它的優(yōu)先級：定義的CSS樣式表中，誰最近绍刮，就用誰温圆。
- 2、對于同一個標簽孩革，如果用到的都是外部樣式表岁歉，且權(quán)重一致，那它的優(yōu)先級：html文件中膝蜈，引用樣式表的位置越近锅移，就用誰熔掺。
例如：
題目演示
CSS的層疊性講完了，我們來做幾個題目吧非剃。
題目1
題目2
題目3
題目4
權(quán)重問題深入
同一個標簽瞬女，攜帶了多個類名，有沖突：
這里需要補充兩種沖突的情況：
- 1努潘、對同一個標簽，如果用到了了多個相同的內(nèi)嵌樣式表坤学，它的優(yōu)先級：定義的樣式表中疯坤，誰最近，就用誰深浮。
- 2压怠、對于同一個標簽，如果引用了多個相同的外部樣式表飞苇，它的優(yōu)先級：html文件中菌瘫，引用樣式表的位置越近，就用誰布卡。
例如：（就近原則）
上圖中雨让，文字顯示的顏色均為紅色。因為這和在標簽中的掛類名的書序無關(guān)忿等，只和css的順序有關(guān)栖忠。
!important標記：優(yōu)先級最高
來看個很簡單的例子：
上圖中，顯然id選擇器的權(quán)重最大贸街，所以文字的顏色是紅色庵寞。
如果我們想讓文字的顏色顯示為綠色，只需要給標簽選擇器的加一個!important標記薛匪，此時其權(quán)重為無窮大捐川。如下：
important是英語里面的“重要的”的意思。我們可以通過如下語法：
k:v !important;
來給一個屬性提高權(quán)重逸尖。這個屬性的權(quán)重就是無窮大古沥。
注意，一定要注意語法的正確性冷溶。
正確的語法：
font-size:60px !important;
錯誤的語法：
font-size:60px; !important; 不能把!important寫在外面
font-size:60px important; 不能忘記感嘆號
!important標記需要強調(diào)如下3點：
（1）!important提升的是一個屬性渐白，而不是一個選擇器
p{
color:red !important; 只寫了這一個!important，所以只有字體顏色屬性提升了權(quán)重
font-size: 100px ; 這條屬性沒有寫!important逞频，所以沒有提升權(quán)重
}
#para1{
color:blue;
font-size: 50px;
}
.spec{
color:green;
font-size: 20px;
}
所以纯衍，綜合來看，字體顏色是red（聽important的）苗胀；字號是50px（聽id的）襟诸。
（2）!important無法提升繼承的權(quán)重瓦堵，該是0還是0
比如HTML結(jié)構(gòu)：
<div>
<p>哈哈哈哈哈哈哈哈</p>
</div>
有CSS樣式：
div{
color:red !important;
}
p{
color:blue;
}
由于div是通過繼承性來影響文字顏色的，所以!important無法提升它的權(quán)重歌亲，權(quán)重依然是0菇用。
干不過p標簽，因為p標簽是實實在在選中了陷揪，所以字是藍色的（以p為準）惋鸥。
(3)!important不影響就近原則
如果大家都是繼承來的，按理說應該按照“就近原則”悍缠，那么important能否影響就近原則呢卦绣？
答案是：不影響。遠的飞蚓，永遠是遠的滤港。不能給遠的寫一個important，干掉近的趴拧。
為了驗證這個問題溅漾，我們可以搞兩層具有繼承性的標簽，然后給外層標簽加一個!important著榴，最終看看就近原則有沒有被打破添履。舉例如下：
PS：做網(wǎng)站的時候，!important 盡量不要用脑又。否則會讓css寫的很亂缝龄。
知識回顧
我們把以上內(nèi)容和上一篇文章做一個簡單的知識回顧。
CSS屬性
css屬性挂谍，面試的時候會有筆試叔壤，筆試沒有智能提示的。
加粗口叙，傾斜炼绘，下劃線：
font-weight:bold;
font-style:italic;
text-decoration:underline;
背景顏色、前景色：
background-color:red;
color:red;
class和id的區(qū)別
class用于css的妄田，id用于js的俺亮。
1）class頁面上可以重復。id頁面上唯一疟呐，不能重復脚曾。
2）一個標簽可以有多個class，用空格隔開启具。但是id只能有id本讥。
各種選擇器(瀏覽器兼容性)
IE6層面兼容的選擇器： 標簽選擇器、id選擇器、類選擇器拷沸、后代色查、交集選擇器、并集選擇器撞芍、通配符秧了。如下：
p
#box
.spec
div p
div.spec
div,p
*
IE7能夠兼容的：兒子選擇器、下一個兄弟選擇器序无。如下：
div>p
h3+p
IE8能夠兼容的：
ul li:first-child
ul li:last-child
css兩個性質(zhì)
繼承性：好的事兒验毡。繼承從上到下，哪些能帝嗡？哪些不能米罚？
層疊性：沖突，多個選擇器描述了同一個屬性丈探，聽誰的？
再看幾個題目：
