即將推出的CSS4 Level 4 Selectors(第4級選擇器)

　　注* CSS4草案發布了。

　　是時侯學習一些新的CSS，不是嗎？

　　我們都習慣去學一個又一個的新前端框架，但是我們常常忘記了，作為我們每天使用的網路核心語言CSS本身也在不斷地推出一些新功能。

　　W3C編輯草案

　　從1月15日的CSS Selectors Level 4 draft 草案描述了一次CSS的飛躍。

　　在我們開始之前，你應該知道：本文中的CSS，很多都無法在瀏覽器中工作。即使是最新的瀏覽器。這是因為，它們還是一些草案-處於起草階段。 level 4 selectors草案於2011年開始，第四版經過大量的討論而最終制定。

　　所以，這是什麼意思？這意味著，在不久的將來，我們可能看到大部分這些功能都將實現，很多將在Chrome和Firefox瀏覽器的開發版本中提供。

　　讓我們來看看有哪些新東西！

　　1. :not(.warning, .alert)

　　我們在第3級選擇器已經見過這個 :not 了。然而Level 4將允許與更復雜的引數匹配。

　　先前，not：只能單獨使用，不能被組合。例如，在Level 3(CSS3)中，你不能這樣做：

a:not([href*="somesite.com"]) {
     
}

　　它會選擇所有地址中不包含somesite.com的連結。但是在新草案中，這樣是允許的。

　　下面是另外一個例子，選擇不在col樣式（Bootstrap 流式列布局樣式）下的的a連結標籤，和除去那些包含img圖片的a標籤

a:not([class|="col"]>a, :has(img)) {
 
}

　　此外，這選擇器還能這樣寫，不選擇那些後面還跟著另一個DIV的DIV。（選擇同級最後一個DIV）

div:not(div+div) {
     
}

　　2. :has(div, p, > a)

　　:has 偽元素選擇器允許您選擇帶有指定子元素的父級元素。例如，要選擇帶有影象子元素為的連結，你可以使用下面的語法：

a:has(img) {
}

　　然而 :has 不侷限於簡單的選擇器。你可以與:not 和 :nth-* 選擇器相結合。

　　例如，我們的選擇有超過十行的表元素：

table:has(tr:nth-of-type(11)) {
     
}

　　:has() 和 :not() 結合使用

　　選擇最後一個元素不是footer的body

body:not(:has(footer:last-child)) {
  
}

　　3. :any-link

　　目前，我們可以使用：link和：visited表明連結的訪問狀態。這個更進一步，它會檢查href的是否在使用者的瀏覽歷史中存在，以確定是否一個給定的連結是否已被訪問。

:link, :visited {
   color: blue;
}

　　建議用 level 4 選擇器，可以直接這樣應用，上述程式碼等價於：

:any-link {
   color: blue;
}

　　4. :scoped

　　直到level 4選擇器，CSS被賦予一個全域性範圍。換句話說，如果你新增下面的CSS：

div {
   color: #444;
}

　　所有的div將應用的 color：#444 的樣式規則（這裡假設沒有被複寫的情況下）。Level 4選擇器 允許將樣式和風格限定於一個元素標籤內：

<section>
  <h2>This is outside the scope.</h2>
  <aside>
    <style scoped>
      h2 {
        font-size: 2rem;
      }
    </style>
    <h2>This is within the scope</h2>
  </aside>
</section>

　　在這個例子中，我們已將應用範圍到限定在aside元素中。在這種標記風格將只適用於父元素下的子元素。

　　5. :matches(selector1, selector2)

　　:matches 偽元素選擇器可以讓我們檢查，一個元素所有在列表中匹配的子元素。例如，如果你想針對所有article下的，段落和H2標籤和連結，你可以這樣寫：

article :matches(h2, a, p) {
     
}

　　這取代了以前更加詳細的語法：

article a, article h2, article p {
     
}

　　6. 延伸選擇器>>

　　你可能熟悉的空格字元讓我們應用到元素的後代上，比如一個div內的所有連結：

div a {
     
}

　　但是到現在為止，我們還沒有看到一個明確的後代選擇符。 level 4 新增了一個 >>

　　但是請注意，這會導致不必要的多餘的字元，它與一個空格是等價的。

　　7. Table In-Column 選擇器

　　這是給table元素新加的一個功能，我們先來看一個基本的table表格：

<table>
  <colgroup>
    <col class="id">
    <col class="personnel-info" colspan="2">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <span class="c"><!-- etc --></span>
    </tr>
  </tbody>
</table>

　　給水平分組元素（即：同一行中）應用樣式很簡單。但給垂直的元素是整體應用樣式有些麻煩。

　　你為了給 personnel-info 這一列新增樣式風格，可以使用Level 4的 || 選擇符。在||選擇符可以針對一列下的TD元素應用樣式，如：

.personnel-info || td {

}

　　結論

　　Level 4封裝的選擇器功能非常強大。但是這些草稿還沒有完全定稿，還有變化的可能，當然，他們正式釋出的時侯，我們將再次介紹！

　　原文地址： webdesign.tutsplus.com