CSS3選擇器中容易誤解的坑
阿新 • • 發佈：2018-12-26
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程式碼：
DOM如下：.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)之間相當於並列的‘&&’的關係，只有滿足所有條件的才會被選擇。所以個人感覺倒著來讀更容易理解。