一、css基礎選擇器
html負責結構，css負責樣式，js負責行爲。
css寫在head標籤裏面的容器級style標籤。
先寫選擇器，然後寫大括號，大括號裏面是樣式。
常見屬性：
1 h1{ 2 color:blue; 3 font-size: 60px; 4 font-weight: normal; 5 text-decoration: underline; 6 font-style: italic; 7 background-color:pink; 8 } |
1.1 標籤選擇器
就是用標籤名來當做選擇器。
1）所有標籤都能夠當做選擇器，比如body、h1、dl、ul、span等等
2）不管這個標籤藏的多深，都能夠被選擇上。
3）選擇的是所有的，而不是某一個。所以是共性，而不是特性。
比如希望頁面上所有的超級鏈接都沒有下劃線：
1 a{ 2 /*去掉下劃線：*/ 3 text-decoration: none; 4 } |
1.2 id選擇器
#表示選擇id
1 #lj1{ 2 font-size: 60px; 3 font-weight: bold; 4 color:black; 5 } |
1）任何的標籤都可以有id，id的命名要以字母開頭，可以有數字、下劃線。大小寫嚴格區別，也就是說mm和MM是兩個不同的id。
2）同一個頁面內id不能重複，即使不一樣的標籤，也不能是相同的id。
也就是說，如果有一個p的id叫做haha，這個頁面內，其他所有的元素的id都不能叫做haha。
1.3 類選擇器
.就是類的符號。類的英語叫做class。
所謂的類，就是class屬性，class屬性和id非常相似，任何的標籤都可以攜帶class屬性。
class屬性可以重複，比如，頁面上可能有很多標籤都有teshu這個類：
1 <h3>我是一個h3啊</h3> 2 <h3 class="teshu">我是一個h3啊</h3> 3 <h3>我是一個h3啊</h3> 4 <p>我是一個段落啊</p> 5 <p class="teshu">我是一個段落啊</p> 6 <p class="teshu">我是一個段落啊</p> |
css裏面用.來表示類：
1 .teshu{ 2 color: red; 3 } |
同一個標籤，可能同時屬於多個類，用空格隔開：
1 <h3 class="teshu zhongyao">我是一個h3啊</h3> |
這樣，這個h3就同時屬於teshu類，也同時屬於zhongyao類。
初學者常見的錯誤，就是寫成了兩個class：
1 <h3 class="teshu" class="zhongyao">我是一個h3啊</h3> |
所以要總結兩條：
1） class可以重複，也就是說，同一個頁面上可能有多個標籤同時屬於某一個類；
2） 同一個標籤可以同時攜帶多個類。
類的使用，能夠反映一個人的css水平。
比如，我們現在要做一個頁面：
段落1
段落2
段落3
正確的思路，就是用所謂“公共類”的思路，就是我們類就是提供“公共服務”，比如有綠、大、線，一旦攜帶這個類名，就有相應的樣式變化：
1 <style type="text/css"> 2 .lv{ 3 color:green; 4 } 5 .da{ 6 font-size: 60px; 7 } 8 .xian{ 9 text-decoration: underline; 10 } 11 </style> |
每個標籤，就去選取自己想要的類：
1 <p class="lv da">段落1</p> 2 <p class="lv xian">段落2</p> 3 <p class="da xian">段落3</p> |
也就是說：
1） 不要去試圖用一個類名，把某個標籤的所有樣式寫完。這個標籤要多攜帶幾個類，共同造成這個標籤的樣式。
2） 每一個類要儘可能小，有“公共”的概念，能夠讓更多的標籤使用。
到底用id還是用class？
答案：儘可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標籤，所以我們css層面儘量不用id，要不然js就很彆扭。另一層面，我們會認爲一個有id的元素，有動態效果。
類上樣式，id上行爲
綜上我們可以知道：就是一個標籤，可以同時被多種選擇器選擇，標籤選擇器、id選擇器、類選擇器。這些選擇器都可以選擇上同一個標籤，從而影響樣式，這就是css的cascading“層疊式”的第一層含義。
二、css高級選擇器
2.1 後代選擇器
1 <style type="text/css"> 2 .div1 p{ 3 color:red; 4 } 5 </style> |
空格就表示後代，.divp 就是.div的後代所有的p。
強調一下，選擇的是後代，不一定是兒子。
比如：
1 <div> 2 <ul> 3 <li> 4 <p>段落</p> 5 <p>段落</p> 6 <p>段落</p> 7 </li> 8 </ul> 9 </div> |
能夠被下面的選擇器選擇上：
1 .div1 p{ 2 color:red; 3 } |
所以，看見這個選擇器要知道是後代，而不是兒子。選擇的是所有.div中的p，就是後代p。
空格可以多次出現。
1 .div1 .li2 p{ 2 color:red; 3 } |
就是.div1裏面的後代.li2裏面的p。
後代選擇器，就是一種平衡：共性、特性的平衡。當要把某一個部分的所有的什麼，進行樣式改變，就要想到後代選擇器。
後代選擇器，描述的是祖先結構。
2.2 交集選擇器
1 h3.special{ 2 color:red; 3 } |
選擇的元素是同時滿足兩個條件：必須是h3標籤，然後必須是special標籤。
交集選擇器沒有空格。
所以有沒有空格
1 div.red |
和
1 div .red |
不是一個意思。
交集選擇器可以連續交（一般不要這麼寫）
1 h3.special.zhongyao{ 2 color:red; 3 } |
交集選擇器，我們一般都是以標籤名開頭，比如div.haha 比如p.special。
2.3 並集選擇器（分組選擇器）
1 h3,li{ 2 color:red; 3 } |
用逗號就表示並集。
2.4 通配符*
*就表示所有元素。
1 *{ 2 color:red; 3 } |
效率不高，如果頁面上的標籤越多，效率越低，所以頁面上不能出現這個選擇器。
三、一些CSS3選擇器
3.1 兼容問題介紹
我們介紹一下瀏覽器：
IE： 微軟的瀏覽器，隨着操作系統安裝的。所以每個windows都有IE瀏覽器。
windows xp 操作系統安裝的IE6
windows vista 操作系統安裝的IE7
windows 7 操作系統安裝的IE8
windows 8 操作系統安裝的IE9
windows10 操作系統安裝的edge
瀏覽器兼容問題，要出，就基本上就是出在IE6、7身上，這兩個瀏覽器是非常低級的瀏覽器。
http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/
瀏覽器的
3.2 兒子選擇器>
IE7開始兼容，IE6不兼容。
1 div>p{ 2 color:red; 3 } |
div的兒子p。和div的後代p的截然不同。
能夠選擇：
1 <div> 2 <p>我是div的兒子</p> 3 </div> |
不能選擇：
1 <div> 2 <ul> 3 <li> 4 <p>我是div的重孫子</p> 5 </li> 6 </ul> 7 </div> |
3.3 序選擇器
IE8開始兼容；IE6、7都不兼容
選擇第1個li：
1 <style type="text/css"> 2 ul li:first-child{ 3 color:red; 4 } 5 </style> |
選擇最後一個1i：
1 ul li:last-child{ 2 color:blue; 3 } |
由於瀏覽器的更新需要過程，所以現在如果公司還要求兼容IE6、7，那麼就要自己寫類名：
1 <ul> 2 <li>項目</li> 3 <li>項目</li> 4 <li>項目</li> 5 <li>項目</li> 6 <li>項目</li> 7 <li>項目</li> 8 <li>項目</li> 9 <li>項目</li> 10 <li>項目</li> 11 <li>項目</li> 12 </ul> |
用類選擇器來選擇第一個或者最後一個：
1 ul li.first{ 2 color:red; 3 } 4 5 ul li.last{ 6 color:blue; 7 } |
3.4 下一個兄弟選擇器
IE7開始兼容，IE6不兼容。
+表示選擇下一個兄弟
1 <style type="text/css"> 2 h3+p{ 3 color:red; 4 } 5 </style> |
選擇上的是h3元素後面緊挨着的第一個兄弟。
1 <h3>我是一個標題</h3> 2 <p>我是一個段落</p> 3 <p>我是一個段落</p> 4 <p>我是一個段落</p> 5 <h3>我是一個標題</h3> 6 <p>我是一個段落</p> 7 <p>我是一個段落</p> 8 <p>我是一個段落</p> 9 <h3>我是一個標題</h3> 10 <p>我是一個段落</p> 11 <p>我是一個段落</p> 12 <p>我是一個段落</p> 13 <h3>我是一個標題</h3> |
四、CSS的繼承性和層疊性
4.1 繼承性
有一些屬性，當給自己設置的時候，自己的後代都繼承上了，這個就是繼承性。
哪些屬性能繼承？
color、 text-開頭的、line-開頭的、font-開頭的。
這些關於文字樣式的，都能夠繼承；所有關於盒子的、定位的、佈局的屬性都不能繼承。
所以，如果我們的頁面的文字，都是灰色，都是14px。那麼就可以利用繼承性：
1 body{ 2 color:gray; 3 font-size:14px; 4 } |
繼承性是從自己開始，直到最小的元素。
4.2 層疊性
很多公司如果要筆試，那麼一定會考層疊性。
層疊性：就是css處理衝突的能力。所有的權重計算，沒有任何兼容問題！
CSS像藝術家一樣優雅，像工程師一樣嚴謹。
當選擇器，選擇上了某個元素的時候，那麼要這麼統計權重：
id的數量，類的數量，標籤的數量
不進位，實際上能進位（255個標籤，等於1個類名）但是沒有意義！
如果權重一樣，那麼以後出現的爲準：
如果不能直接選中某個元素，通過繼承性影響的話，那麼權重是0。
如果大家都是0，那麼有一個就近原則：誰描述的近，聽誰的。
權重問題大總結：
1） 先看有沒有選中，如果選中了，那麼以（id數，類數，標籤數）來計權重。誰大聽誰的。如果都一
樣，聽後寫的爲準。
2） 如果沒有選中，那麼權重是0。如果大家都是0，就近原則。
複習一下
下列都是IE6兼容的選擇器：
p
#box
.spec
div.box
div .box
div , .box
*
下列都是IE7開始兼容：
div>p
div+p
下列都是IE8開始兼容：
divp:first-child
div p:last-child