前言
做過前端開發的程序員幾乎都對CSS選擇器或多或少了解些，因爲大家幾乎都是按照HTML–CSS–JS的順序來學習。當然，即使你是”半路出家“，直接上手JS的，那你也至少了解ID，類與標籤。而本文就對CSS選擇器簡單做個總結，主要是起到鞏固基礎的作用。
選擇器
選擇符是指一條CSS樣式規則的最左邊部分，總的可分爲五大類十八種。
- 並聯選擇器：即羣組選擇器，即以“,”合併多個分組結果
- 簡單選擇器：標籤，ID，類，屬性，通配符
- 關係選擇器：即派生選擇器，親子，後代，相鄰，兄長
- 僞類選擇器：動作僞類，目標僞類，語言僞類，狀態僞類，結構僞類，取反僞類
- 僞元素選擇器：這個比較具體點，僅指以下幾種。
::before(:before) ::after(:after) ::first-line(:first-line) ::first-letter(:first-letter) ::selection
並聯選擇器
並聯選擇器即羣組選擇器，以”, “分割，這個沒什麼好說的。
簡單選擇器
簡單選擇器分爲上面列的五種，其中，通配符選擇器即”*”，最簡單的避免瀏覽器內置樣式表的影響的方式就是使用該選擇器，* { margin: 0; padding: 0;},這裏主要說下屬性選擇器：具體可參考之前的文章CSS各屬性選擇符區別
ps：如果瀏覽器不支持getElementsByClassName，我們可以將”div.test”轉換div[class~=test]來處理。
關係選擇器
- 親子選擇器”div > p” 選擇作爲div元素子元素的所有p元素
- 後代選擇器”div p” 選擇div元素所有後代元素中的p元素，由此可知，後代選擇器的範圍大於親子選擇器
- 相鄰選擇器”h1 + p” 選擇和h1元素同級且緊接在h1後面出現的p元素，元素h1和元素p擁有共同的父元素
- 兄弟選擇器”h1 ~ p” 選擇和h1元素同級且在h1後面出現的所有p元素，元素h1和元素p擁有共同的父元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {color: #ff0000;}
h2 ~ p {color: #00ff00;}
</style>
</head>
<body>
<p>This is paragraph.</p>
<h1>This is a h1.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<h2>This is a h2.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
僞類選擇器
1.動作僞類：:link :hover :focus :hover :active
:focus僞類一般用於input標籤，如果用於a標籤，則只在使用鍵盤tab命令選中時實現效果。而其餘四個用於a標籤要保證“Love-Hate”的順序。
2.目標僞類：:target,指其id或者name屬性與URL中的hash部分(即#之後的部分)匹配上的元素。
3.語言僞類：:lang用來設置使用特殊語言的內容樣式。另外，lang雖然作爲DOM元素的一個屬性，但:lang僞類與屬性選擇器有所不同，具體表現爲:lang僞類具有”繼承性“。
<body lang='de'><p>something</p></body>如果使用[lang=de]則只能選擇到body元素，因爲p元素沒有lang屬性。但是使用:lang(de)則可以同時選擇到body元素和p元素，表現出繼承性。
4.狀態僞類::checked :enabled :disabled :indeterminate
前三個都好理解，最後一個:indeterminate可參考MDN上說名。即，用於多選框中的input元素切在js中設置了其DOM屬性indeterminate爲true.而且也可用於匹配那些不確定的<progress>進度條。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input, span {
background: blue;
}
:indeterminate, :indeterminate + span {
background: red;
}
</style>
</head>
<body>
<input type="checkbox"><span>China</span>
<script type="text/javascript">
document.getElementsByTagName("input")[0].indeterminate = true;
</script>
</body>
</html>5.結構僞類:
:root用於選取根元素，在HTML文檔中通常是html元素:nth-child() :nth-last-child()是所有子元素過濾僞類的藍本，其他8種都是有它衍生出來的。帶有參數，可以是純數字、代數式或單詞。如果是純數字，數字是從1計起，如果是代數式，n則從零遞增。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li {
border: 1px solid limegreen;
}
li:nth-child(2) {
background: #ccc;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>:nth-of-type() :nth-of-last-type()與nth-child類似，規則是將當前元素的父節點的所有元素按照tagName分組，只要參數符合它在那一組的位置就被匹配到。:first-child用於選擇第一個子元素，效果等同於:nth-child(1):last-child效果等同於:nth-last-child(1):first-of-type :last-of-type效果等同於:nth-of-type(1) :nth-last-of-type(1):only-child用於選擇唯一的子元素，當子元素個數超過1個時，選擇器失效:only-of-type將父節點的子元素按tagName分組，如果某一組只有一個元素，那麼就選擇這些組的元素返回。:empty用於選擇那些不包含任何節點的元素，但允許裏面包含註釋。
6.取反僞類::not()其參數爲一個或多個簡單選擇器，裏面用逗號隔開。
選擇器權重
簡單的權重記憶口訣：從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者僞類選擇器+10，一個元素名或者僞元素+1。
具體可參考：你應該知道的一些事情——CSS權重