CSS複習1-選擇器
什麼是選擇器？
每一條css樣式宣告（定義）由兩部分組成，形式如下：
選擇器{
樣式;
}在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素。
1.、標籤選擇器
標籤選擇器其實就是html程式碼中的標籤。如<html>、<body>、<h1>、<p>、<img>。例如下面程式碼：
p{font-size:12px;line-height:1.6em;}上面的css樣式程式碼的作用：為p標籤設定12px字號，行間距設定1.6em的樣式。
2、類選擇器
類選擇器在css樣式編碼中是最常用到的
語法：
.類選器名稱{css樣式程式碼;}主語：
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標籤把要修飾的內容標記起來，如下：
<span>我叫xxx</span>第二步：使用class=”類選擇器名稱”為標籤設定一個類，如下：
<span class="stress">我叫xxx</span>第三步：設定類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*3、ID選擇器
在很多方面，ID選擇器都 類似於 類選擇符，但也有一些重要的區別：
1、為標籤設定id="ID名稱"，而不是class=”類名稱”。
2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
#stress{
color:red;
}4、類和ID選擇器的區別
學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？我們不要著急先來總結一下他們的相同點和不同點：
相同點：可以應用於任何元素
不同點：
1、ID選擇器只能在文件中使用一次。與類選擇器不同，在一個HTML文件中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
5、子選擇器
還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素
.food>li{border:1px solid red;}這行程式碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。
6、包含(後代)選擇器
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。
.first span{color:red;}請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。
總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
7、通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，當然他的權重也最小，權重問題我們最後總結的時候說~
“`
*{
font-size:20px;
}
8、偽類選擇符
更有趣的是偽類選擇符，為什麼叫做偽類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中一個標籤元素的滑鼠滑過的狀態來設定字型顏色：
a:hover{color:red;}
滑鼠劃過只是其中一種，還有很多新出現的偽類選擇器，我們在之後的講解中會一一提及
9、分組選擇符
當你想為html中多個標籤元素設定同一個樣式時，可以使用分組選擇符（，），如下程式碼為右側程式碼編輯器中的h1、span標籤同時設定字型顏色為紅色：
h1,span{color:red;}
它相當於下面兩行程式碼：
h1{color:red;}
span{color:red;}
10、繼承
CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面程式碼：如某種顏色應用於p標籤，這個顏色設定不僅應用p標籤，還應用於p標籤中的所有子元素文字，這裡子元素為span標籤。
p{color:red;}
p{border:1px solid red;}
11、層疊
我們來思考一個問題：如果在html檔案中對於同一個元素可以有多個css樣式存在並且這多個css樣式具有相同權重值怎麼辦？好，層疊幫你解決這個問題。
層疊就是在html檔案中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。
如下面程式碼:
p{color:red;}
p{color:green;}
所以前面的css樣式優先順序就不難理解了：
內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）。
12、重要
我們在做網頁程式碼的時，有些特殊的情況需要為某些樣式設定具有最高權值，怎麼辦？這時候我們可以使用!important來解決。
如下程式碼：
p{color:red!important;}
p{color:green;}
注意：!important要寫在分號的前面
這裡注意當網頁製作者不設定css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且使用者也可以在瀏覽器中設定自己習慣的樣式，比如有的使用者習慣把字號設定為大一些，使其檢視網頁的文字更加清楚。
這時注意樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式，但記住!important優先順序樣式是個例外，權值高於使用者自己設定的樣式。
最後的最後來說一說各個選擇器的權重問題
第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表型別選擇器和偽元素選擇器，如div p，權值為1。
萬用字元、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
繼承的樣式沒有權值。
注意：
假設 div p {}和 p {} 都指向同一個p標籤，但是前者的權重為每個選擇器權重的和（2）大於後者（1） 所有請大家在使用的時候，多考慮。