CSS選擇器可用於實現對HTML網頁上的元素樣式的一對一，一對多或者多對一的控制。
二、CSS選擇器的種類（這裡介紹常用的）
標簽選擇器（Type selectors ）：直接引用HTML中的標簽控制相應元素樣式。
例如：
P {
font-size: 1.25em;
color: yellow;
}
// P標簽內的字體大小為1.25em,字體顏色為黃色.
類選擇器（Class Selectors ）：利用自行定義的類名控制相應元素樣式，用“.”來標志。
例如：
.className{
background-color: red;
}
// 設置className類的背景顏色為紅色。
ID選擇器（ID Selectors)：利用自行定義的ID名（ID名需唯一）控制相應元素樣式，用“#”來標志。（因為選擇器級聯關系，建議非必要時，少用）
例如：
#idName{
width:200px;
height:200px;
ackground-color: yellow;
}
// 設置idName元素寬200px,高200px，背景顏色為黃色。
群組選擇器(Group Selectors )：多種選擇器組合成一組，控制同一種樣式，選擇器間用“，”隔開。（當要設置多個元素擁有同種樣式時，采用群組選擇器更加便捷，而且可以減少CSS代碼。）
例如：
P,.className,#idName{
font-size: 1.25em;
color: yellow;
background-color: red;
}
// 設置p標簽，className類，idName相應元素的字體大小為1.25em,字體顏色為紅 色。
子選擇器(Child Selectors )：用兩個常用選擇器，中間通過“>”進行選擇。其中前面的選擇器選擇父元素，後面的選擇器僅選擇父元素第一代孩子中全部對應的元素。
例如：
<style>
#box > span {color:red;}
</style>
<div id="box">
<h2>測試子選擇器</h2>
<span>第一個span標簽</span>
<p><span>第二個span標簽</span></p>
</div>
// 父元素box中的第一代孩子中的span元素字體將被設置為紅色，而包含在p標簽
中的span元素（box元素的第二代孩子）則沒有被影響。
拓展：
:first-child 匹配包含在其父元素中，每個作為首孩子出現的元素。（不限元素類型）
:last-child 匹配包含在其父元素中，每個作為最後孩子出現的元素。
:only-child 匹配包含其父元素中，每個作為唯一孩子出現的元素。
:nth-child(n) 匹配包含在父元素中，每個作為第n個孩子出現的元素。（n 可
以是數字、關鍵詞或公式）
:first-of-type 匹配包含在其父元素中，每個作為首孩子出現的特定類型元素。
:last-of-type 匹配包含在其父元素中，每個作為最後孩子出現的特定類型元素。
:nth-of-type(n) 匹配包含在父元素中，每個作為第n個孩子出現的的特定類型元素。
（n 可以是數字、關鍵詞或公式）
後代選擇器(Descendant Selectors )：用兩個常用選擇器，中間通過空格隔開。其中前面的選擇器選擇父元素，後面的選擇器選擇父元素全部孩子中全部對應的元素。（注意不要和子選擇器選擇對象范圍混淆）
例如：
<style>
#box span {color:red;}
</style>
<div id="box">
<h2>測試子選擇器</h2>
<span>第一個span標簽</span>
<p><span>第二個span標簽</span></p>
</div>
// 父元素box的後代中的所有span元素的字體都會被設置成紅色。
相鄰同胞選擇器(Adjacent sibling selectors)：用兩個常用選擇器，中間通過“+”進行選擇。作用於與前面選擇器同胞的，且是後面選擇器選擇的第一個元素。
例如
<style>
p+span{color:red;}
</style>
<div id="box">
<h2>測試相鄰同胞選擇器選擇器</h2>
<p><span>第一個span標簽</span></p>
<span>第二個span標簽</span>
<span>第三個span標簽</span>
</div>
// 第二個span標簽和p標簽同胞故字體將被設置為紅色。
偽類選擇器(pseudo-classes Selectors)：有時候還會需要用文檔以外的其他條件來實現元素的樣式，例如鼠標懸停時，目標元素的樣式變化等。
例如：
<style>
a:hover{
color:red;
}
</style>
<a href="#">鼠標懸停時，我會改變顏色喲.</a>
// 鼠標懸停在鏈接上時，字體顏色由默認的藍色變成紅色。
與此相似的偽類有：
:link 設置元素初始樣式。
:visited 設置元素被訪問後的樣式。
:hover 設置鼠標懸停時樣式。
:active 設置鼠標點擊瞬間的樣式。
// 在CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，a:active 必須被
置於 a:hover 之後，才是有效的。若要同時設置這四種，一般設置順序為LVHA。
// 該種偽類一般被應用在鏈接上，也可以應用在其他元素上，例如表單元素中。
拓展：
:first-line 設置段落的首行樣式。
:first-letter 設置段落的首字母樣式。（若為英文則作用於第一個字母，若為中文則作用
於第一個漢字）
屬性選擇器(Attribute Selectors )：通過判斷元素中是否存在html中某個屬性或者符合某個屬性值來選擇作用該元素。
例如一：
<style>
p[title]{
color:red;
}
</style>
<p title="tag">我是含有title標簽的p標簽，我將變紅色。</p>
<p>我是不含title標簽的p標簽。</p>
// 選擇將含有title屬性的p標簽元素字體設置成紅色。
例如二：
<style>
p[title="tag2"]{
color:red;
}
</style>
<p title="tag1">我是含有title標簽且值為tag1的p標簽。</p>
<p title="tag2">我是含有title標簽且值為tag2的p標簽，我將變紅色。</p>
// 選擇設置含有title屬性，且title屬性值為tag2的p標簽元素字體為紅色。
通配選擇器：通用選擇器用*來表示,選擇作用於所有元素。
例如：
*{
color:red;
}
// 所有的元素的字體顏色都將被設置成紅色。
樣式繼承：某元素設置了樣式，則其後代可以繼承其某些樣式設置。
例如：
<style>
.father{
font-size:20px;
color:yellow;
border:#000 1px solid;
}
</style>
<div class="father">
<p>樣式繼承</p>
<p><span>樣式繼承</span></p>
</div>
// 在父元素div中設置了字體大小20px，字體顏色黃色,邊框黑色，1px，實線 ，其後代將繼承了它的字體樣式，但沒有繼承它的邊框樣式。
// 注意：父元素的某些樣式設置時不會被子元素繼承，例如margin（外邊距），border（邊框）等等。
級聯：是屬性設置發生沖突時，浏覽器用來確定元素會應用那種樣式的一套規則。
屬性發生沖突的兩種情況：
第一種：某元素的多個祖先設置了同個屬性的值。
第二種：同時兩個或者兩個以上的樣式設置了同一個屬性。
樣式應用規則：
注意：某些樣式重置後，浏覽器仍會保留某些初始屬性設置。
例如：
<style>
.box{
font-size:20px;
}
</style>
<div class="box">
<h1>h1標簽</h1>
<h2>h2標簽</h2>
<h3>h3標簽</h3>
</div>
//設置了一樣的字體大小後，浏覽器仍會保持h標簽初始大小等級。
1、當元素的多個祖先同時設置了同個屬性，則元素應用離它最近的祖先設置的樣式。
例如：
<style>
.grandpa{
color:yellow;
}
.father{
color:red;
}
</style>
<div class="grandpa">
<div class="father">
<p>樣式繼承</p>
</div>
</div>
// p標簽元素的祖先同時設置了字體顏色，最終p標簽元素最終繼承了離它最近的father類設置的樣式，字體為紅色。
2、元素應用本身直接設置的樣式。
例如：
<style>
.grandpa{
color:yellow;
}
p{
color:blue;
}
.father{
color:red;
}
</style>
<div class="grandpa">
<div class="father">
<p>樣式繼承</p>
</div>
</div>
// p標簽元素最終使用本身設置的字體顏色，藍色。
3、應用選擇器權重高者的樣式。
權重比例如下：
一個標簽選擇器=1個權重
一個類選擇器=10個權重
一個ID選擇器=100個權重
例如：
#idName p 權重=100+1=101
#idName .className p 權重=100+10+1=111
// 注意：偽元素相當於1個權重，例如：:first-line；偽類相當於10個權重，例如：:hover。
例如：
<style>
.className{
color:blue;
}
#idName{
color:yellow;
}
</style>
<div id="idName" class="className">
<p>樣式設置</p>
</div>
// ID選擇器權重高，p標簽元素字體為黃色
4、後設置的樣式會覆蓋先設置的樣式。
例如：
<style>
.style1{
width:100px;
height:100px;
background:red;
}
.style2{
background:yellow;
}
</style>
<div class="style1 style2"></div>
// 最終背景顏色為後設置的黃色。
5、！Important可以推翻樣式。
例如：
<style>
p{
color:red !important;
color:yellow;
}
</style>
<p>!important</p>
// 字體顏色最終為紅色。
第一種：采用!important。
注意：由於!important的權力很大，推翻同屬性的其他樣式設置，經常使用將導致你的樣式不遵從級聯規則。
第二種：改變樣式的選擇器權重。
注意：僅僅采用簡單的加大權重，容易導致選擇器名稱過長。
例如：
<style>
.intro{
color:red;
}
#content .intro{
color:yellow;
}
</style>
<body>
<div id="content">
<p class="intro">增加權重</p>
</div>
</body>
// 通過增加一個id選擇器來增加權重，使字體樣式變黃色而不是紅色。
第三種：微調樣式出現順序。
注意：一般先引用外部樣式，再寫內部樣式。
例如：
css.css文件中的樣式是：
p{
color:blue;
}
Html中部分代碼：
<link rel="stylesheet" type="text/css" href="css.css" />
<style>
p{
color:red;
}
</style>
<body>
<p>我會聽內部樣式的。</p>
</body>
// 最終文字為紅色。
又如：
<style>
p{
color:red;
}
</style>
<link rel="stylesheet" type="text/css" href="css.css" />
<body>
<p>我會聽外部樣式的。</p>
// 最終文字為藍色的。
HTML呈現網頁的基本內容，CSS呈現網頁的外觀。
CSS樣式有外部樣式和內部樣式。CSS樣式一般包含了兩部分，一部分是選擇器（告訴浏覽器該樣式的作用對象），一部分是聲明塊。聲明語句包括了屬性和屬性值。
外部樣式：
好處：
1、利於更快的開發（樣式代碼可以復用）和修改網頁。
2、使用戶更快打開網頁。（外部樣式會緩存在用戶的計算機上，用戶再打開相同外部樣式的網頁則不需要重新加載外部樣式。）
壞處：
網頁開發時，有時重新修改了外部樣式，但之前緩存了外部樣式，浏覽器一般不再重新加載外部樣式，導致與預期效果不同。
內部樣式：只應用於當前網頁，不便於開發和對於整個網站的修改。