CSS3新增了許多選擇器如nth-child/last-child等，這讓我們在寫樣式的時候可以更加靈活，而讓我們廣大前端程序員熟知的JQ的選擇器也正是根據CSS選擇器來做的。當然HML DOM也爲我們拓展了querySelector與querySelectorAll來使用CSS選擇器進行DOM操作，這實在比之前的getElementByXX方便了許多，然而或許之前的CSS選擇器會讓我們在使用CSS3選擇器的時候造成一些誤導，因爲我就是這麼自然而然就被圈進了套路還渾然不覺，前端水太深，我想回農村啊！
開始之前如果你對CSS3選擇器還沒有太多瞭解，請移步萬能的w3cschool，雖然其相關文檔會讓你吐血。
根據我們常用的CSS選擇器如類選擇器來說，我們都知道.header-container{}表示對帶有‘header-container’這個類名的元素進行CSS的設置。而加入了CSS選擇器會產生什麼效果呢？我們首先來看一段使用CSS3選擇器操作的CSS代碼：
.a:not(:nth-child(2)){
margin-bottom: 20px;
width: 100px;
height: 30px;
background-color: #00acd6;
}<div class="a"></div>
<div></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
所有的類名爲a的元素都被選擇了。如果到了這裏你也有些許疑惑，那你跟我一樣“翻車”了，哈哈！
其實無論：last-child、：nth-child前面使用了什麼修飾（類名或者標籤名），其原則都是基於其父元素來選擇的，這裏：nth-child(2)是指<body>下的第二個子元素，而不是第二個類名爲a的元素，.a :not() :nth-child(2)之間相當於並列的‘&&’的關係，只有滿足所有條件的纔會被選擇。所以個人感覺倒着來讀更容易理解。