組合選擇器
1、后代選擇器
#1、作用：找到指定標簽的所有后代（兒子，孫子，重孫子、、、）標簽，設置屬性
#2、格式：
標簽名1 xxx {
屬性：值;
}
#3、注意：
1、后代選擇器必須用空格隔開
2、后代不僅僅是兒子，也包括孫子、重孫子
3、后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
4、后代選擇器可以通過空格一直延續下去
示例
2、子元素選擇器
#1、作用：找到制定標簽的所有特定的直接子元素，然后設置屬性
#2、格式：
標簽名1>標簽名2 {
屬性：值;
}
先找到名稱叫做"標簽名稱1"的標簽，然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素
#3、注意：
1、子元素選擇器之間需要用>符號鏈接，並且不能有空格
比如div >p會找div標簽的所有后代標簽，標簽名為">p"
2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符號一直延續下去
示例
3、毗鄰選擇器，CSS2推出（又稱相鄰兄弟選擇器）
#1、作用：選定緊跟其后的那個標簽
#2、格式
選擇器1+選擇器2 {
屬性：值;
}
#3、注意點：
1、毗鄰選擇器必須通過+號鏈接
2、毗鄰選擇器只能選中緊跟其后的那個標簽，不能選中被隔開的標簽
4、弟弟選擇器，CSS3推出（又稱通用兄弟選擇器）
#1、作用：給指定選擇器后面的所有選擇器中的所有標簽設置屬性
#2、格式：
選擇器1~選擇器2 {
屬性：值;
}
#3、注意點：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器后面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中
示例
三 交集選擇器與並集選擇器
1、交集選擇器（不常用）
#1、作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性
#2、格式：
選擇器1選擇器2 {
屬性：值;
}
#3、注意：
1、選擇器與選擇器之間沒有任何鏈接符號
2、選擇器可以使用標簽名稱、id、class
3、交集選擇器在企業開發中並不多見，了解即可
因為：p.part1 完全可以用.part1取代
示例
2、並集選擇器
#1、作用：給所有滿足條件的標簽設置屬性
#2、格式：
選擇器1,選擇器2 {
屬性：值;
}
#3、注意：
1、選擇器與選擇器之間必須用逗號來鏈接
2、選擇器可以使用標簽名稱、id、class
示例
四 序列選擇器
#1、作用： css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，過去的選擇器中要選中某個必須加id或class，學習了這9個后，不用加id或class，想選中同級別的第幾個就選第幾個 #2、格式 #2.1 同級別 :first-child p:first-child 同級別的第一個 :last-child p:last-child 同級別的最后一個 :nth-child(n) 同級別的第n個 :nth-last-child(n) 同級別的倒數第n個 #2.2 同級別同類型 :first-of-type 同級別同類型的第一個 :last-of-type 同級別同類型的最后一個 :nth-of-type(n) 同級別同類型的第n個 :nth-last-of-type(n) 同級別同類型的倒數第n個 #2.3 其他 :only-of-type 同類型的唯一一個 :only-child 同級別的唯一一個
示例：同級別
示例:同級同類型
示例：其他
五 屬性選擇器
#1、作用：根據指定的屬性名稱找到對應的標簽，然后設置屬性
該選擇器，最常用於input標簽
#2、格式與具體用法：
[屬性名]
其他選擇器[屬性名]
[屬性名=值]
[屬性名^=值]
[屬性名$=值]
[屬性名*=值]
例1：找到所有包含id屬性的標簽
[id]
例2：找到所有包含id屬性的p標簽
p[id]
例3：找到所有class屬性值為part1的p標簽
p[class="part1"]
例4：找到所有href屬性值以https開頭的a標簽
a[href^="https"]
例5：找到所有src屬性值以png結果的img標簽
img[src$="png"]
例6：找到所有class屬性值中包含part2的標簽
[class*="part"]
示例
六 偽類選擇器
#1、作用：常用的幾種偽類選擇器。
#1.1 沒有訪問的超鏈接a標簽樣式：
a:link {
color: blue;
}
#1.2 訪問過的超鏈接a標簽樣式：
a:visited {
color: gray;
}
#1.3 鼠標懸浮在元素上應用樣式：
a:hover {
background-color: #eee;
}
#1.4 鼠標點擊瞬間的樣式：
a:active {
color: green;
}
#1.5 input輸入框獲取焦點時樣式：
input:focus {
outline: none;
background-color: #eee;
}
#2 注意：
a標簽的偽類選擇器可以單獨出現，也可以一起出現
a標簽的偽類選擇器如果一起出現，有嚴格的順序要求，否則失效
link，visited，hover，active
hover是所有其他標簽都可以使用的
focus只給input標簽使用
示例
七 偽元素選擇器
#1、常用的偽元素。
#1.1 first-letter：雜志類文章首字母樣式調整
例如：
p:first-letter {
font-size: 48px;
}
#1.2 before
用於在元素的內容前面插入新內容。
例如：
p:before {
content: "*";
color: red;
}
在所有p標簽的內容前面加上一個紅色的*。
#1.3 after
用於在元素的內容后面插入新內容。
例如：
p:after {
content: "?";
color: red;
}
在所有p標簽的內容后面加上一個藍色的?。
示例
八 CSS三大特性
1、繼承性
#1、定義：給某一個元素設置一些屬性，該元素的后代也可以使用，這個我們就稱之為繼承性
#2、注意：
1、只有以color、font-、text-、line-開頭的屬性才可以繼承
2、a標簽的文字顏色和下划線是不能繼承別人的
3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大
ps:打開瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應用場景：
通常基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式
示例
2、層疊性
#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那么會有覆蓋效果 #2、注意： 1、層疊性只有在多個選擇器選中了同一個標簽，然后設置了相同的屬性， 才會發生層疊性 ps：通過谷歌瀏覽器可以查看到，一些屬性被划掉了
示例
3、優先級
#1、定義：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
#2、優先級
整體優先級從高到底：行內樣式>嵌入樣式>外部樣式
行內樣式並不推薦使用，所以我們以嵌入為例來介紹優先級
(1)大前提：直接選中 > 間接選中(即繼承而來的)
View Code
(2)如果都是間接選中，那么誰離目標標簽比較近，就聽誰的
示例
(3)如果都是直接選中，並且都是同類型的選擇器，那么就是誰寫的在后面就聽誰的
示例
(4)如果都是直接選中，並且是不同類型的選擇器，那么就會按照選擇器的優先級來層疊:
id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）
示例
(5)優先級之!important
#1、作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，但是不推薦使用。因為大量使用!import的代碼是無法維護的。
#2、注意：
1、!important只能用於直接選中，不能用於間接選中
2、!important只能用於提升被指定的屬性的優先級，其他屬性的優先級不會被提升
3、!important必須寫在屬性值分號的前面
示例
(6)優先級之權重計算
#1、強調 如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級 #2、計算方式 #1、id數多的優先級高 #2、id數相同，則判定類數多的優先級高 #3、id數、class數均相同，則判定標簽數多的優先級高 #4、若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在后面誰的優先級高
示例
總結：
我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素並且為其設置樣式，那瀏覽器根據什么來決定應該應用哪個樣式呢？
其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：
除此之外還可以通過添加 !import方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用!import會使樣式文件混亂不易維護。
原創作者：馬一特
文章出處：http://www.cnblogs.com/mayite/