這篇文章主要用於存儲CSS以及CSS3的選擇器部分知識，以便日後查閱及記憶.

該內容分為兩部分，第一部分為css選擇器的一些基本知識。第二部分為CSS3新增加的選擇器。

在開始之前，先簡單介紹一下選擇器，選擇器的作用就是定位我們想要樣式化的網頁HTML元素。選擇器可以分為以下幾種類型。

1、簡單選擇器，通過元素類型，class或id匹配一個或多個元素。

2、屬性選擇器，通過屬性/屬性值 匹配一個或多個元素。

3、偽類，匹配處於確定狀態的一個或多個元素。（比如鼠標指針懸停的元素、當前被選中或未被選中的復選框、元素是DOM樹中一父節點的第一個子節點等）

4、偽元素，匹配處於相關的確定位置的一個或多個元素。（例如每個段落的第一個字，或者某個元素之前生成的內容）

5、組合器，這裏不僅僅是選擇器本身，還有以有效的方式組合兩個或者更多的選擇器用於非常特定的選擇的方法。

6、多用選擇器，這些也不是單獨的選擇器。這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面， 以將一組聲明應用於由這些選擇器選擇的所有元素。

那麽下面就具體的選擇器來一一做一定的解釋，有不足的地方還希望不吝賜教。嘿嘿。

一.基本選擇器:

　　　　 1：*，通配符，匹配所有元素。

*{
  padding:0;
  margin:0;    
}

/*個人建議，請不要在你的CSS代碼中出現通配符，通配符（*）是一種效率極低甚至會有在大型網站中使用導致頁面渲染變慢的可能。所以，請盡可能的不要使用。
 
*/

　　　　2：#id，id選擇器，匹配所有id屬性為"id"的元素，id屬性具有唯一性。

#text {
  font-size: 16px;
}
/*一個ID名稱在文件中必須是唯一的,若是ID名稱重復，則可能會出現不可預知的情況，所以一定要避免ID名稱的重復*/

　　　　3：.class，class選擇器，匹配所有class屬性中包含"class"的元素。文檔中的多個元素可以具有相同的類名，而單個元素可以有多個類名(以空格分開多個類名的形式書寫)

.demo{
    width: 100px;
    height: 100px;
    background: red;
}

　　　　4：E

span{
    color: red;
    background: pink;
    font-style: 20px;
}

二.多元素組合選擇器:

　　　　5：E,F，多元素選擇器，匹配所有E元素和F元素，E和F之間用逗號（，）分隔。

span,p,div{
    color: red;
    background: pink;
    font-style: 20px;
}

　　　　6：E F，後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔。

.demo .text{
    color: gray;
}

　　　　7：E > F，子元素選擇器，匹配所有E元素的子元素F。

.demo>.text{
    color: gray;
}

　　　　8：E + F，毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F。

.demo + .text{
    color: gray;
}

三.屬性選擇器:

　　　　9：E[att]，匹配所有具有att屬性的E元素，不考慮它的值。（E在此處可以省略，如“[checked]”，下同）

[title]{
    color:red;
}

　　　　10：E[att=val]，匹配所有att屬性等於"val"的元素。

[title=name]{
    border:5px solid blue;
}
img[title=bgimg]{
    width:100px;
    height:100px;        
}

　　　　11：E[att~=val]，匹配所有att屬性具有多個空格分隔的值、其中一個值等於"val"的E元素。

[title~=hello]{
    color:red;
} 

　　　　12：E[att |= val]，匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"val"開頭的E元素。（主要用於lang屬性，比如"en"、"en-us"、"en-gb"等等）

[lang|=en] {
    color:red;
}

四.偽類選擇器:

　　　　13：E:first-child，匹配父元素的第一個子元素。

.demo:first-child{
    color: pink;
}

　　　　14：E:link，匹配所有未被點擊的鏈接。

.demo:link{
    font-weight: 900;
}

　　　　15：E:visited，匹配所有已被點擊的鏈接。

.demo:visited{
    font-weight: 900;
}

　　　　16：E:active，匹配鼠標已經在其上按下，還沒有釋放的E元素。

.demo:active{
    font-weight: 900;
}

　　　　17：E:hover，匹配鼠標懸停其上的E元素。

.demo:hover{
    color: orange;
    font-weight:900;      
}

　　　　18：E:focus，匹配獲得當前焦點的E元素。

input:focus{
    color:red;
}

　　　　19：E:lang(c)，匹配lang屬性等於c的元素。

html:lang(zh){
    color:lime;
    background:red;
}
:lang(en) > span{
    color:pink;
}

五.偽元素選擇器:

　　　　20：E:first-line，匹配E元素的第一行。

.demo:first-line{
    color:red;
}

　　　　21：E:first-letter，匹配E元素的第一個字母。

.demo:first-letter{
    font-weight: border;
}

　　　　22：E:before，在E元素之前插入生成的內容。

.num:before{
  content:"(" attr(href) ")",
          
}

　　　　23：E:after，在E元素之後插入生成的內容。

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
/*after清除浮動，這裏只對after和before的選擇器寫法做一個簡單說明，並不具體涉及屬性及其用法*/

最後想說，這些東西只是簡單的羅列和解釋，算是方便在使用的時候快速查找，如果想要更深入的了解還需要的更多的練習和代碼量，就算是最基本的選擇器知識，其實也要比這些多得多。只是還有很多用處並不是特別多，比如上面的E:lang(c)，E:visited，E:active等，還有很多未寫在文章內的，如果想要更深入的學習，大家可以去下面的相關鏈接查看。

參考：css選擇器筆記，30個你必須熟記的css選擇器，MDN-docs-選擇器介紹，HTML5和CSS3權威指南（第3版下冊-廬陵牛）第十九章，before和after偽元素的用法。

CSS(CSS3)選擇器（1）