是時(shí)侯學(xué)習(xí)一些新的CSS，不是嗎？
我們都習(xí)慣去學(xué)一個(gè)又一個(gè)的新前端框架，但是我們常常忘記了，作為我們每天使用的網(wǎng)絡(luò)核心語言CSS本身也在不斷地推出一些新功能。
W3C編輯草案
從1月15日的CSS Selectors Level 4 draft 草案描述了一次CSS的飛躍。
在我們開始之前，你應(yīng)該知道：本文中的CSS，很多都無法在瀏覽器中工作。即使是最新的瀏覽器。這是因?yàn)?，它們還是一些草案-處于起草階段。 level 4 selectors草案于2011年開始，第四版經(jīng)過大量的討論而最終制定。
所以，這是什么意思？這意味著，在不久的將來，我們可能看到大部分這些功能都將實(shí)現(xiàn)，很多將在Chrome和Firefox瀏覽器的開發(fā)版本中提供。
讓我們來看看有哪些新東西！
1. :not(.warning, .alert)
我們在第3級選擇器已經(jīng)見過這個(gè) :not 了。然而Level 4將允許與更復(fù)雜的參數(shù)匹配。
先前，not：只能單獨(dú)使用，不能被組合。例如，在Level 3(CSS3)中，你不能這樣做：
a:not([href*="somesite.com"]) {
}
它會(huì)選擇所有地址中不包含somesite.com的鏈接。但是在新草案中，這樣是允許的。
下面是另外一個(gè)例子，選擇不在col樣式（Bootstrap 流式列布局樣式）下的的a鏈接標(biāo)簽，和除去那些包含img圖片的a標(biāo)簽
a:not([class|="col"]>a, :has(img)) {
}
此外，這選擇器還能這樣寫，不選擇那些后面還跟著另一個(gè)DIV的DIV。（選擇同級最后一個(gè)DIV）
div:not(div+div) {
}
2. :has(div, p, > a)
:has 偽元素選擇器允許您選擇帶有指定子元素的父級元素。例如，要選擇帶有圖像子元素為的鏈接，你可以使用下面的語法：
a:has(img) {
}
然而 :has 不局限于簡單的選擇器。你可以與:not 和 :nth-* 選擇器相結(jié)合。
例如，我們的選擇有超過十行的表元素：
table:has(tr:nth-of-type(11)) {
}
:has() 和 :not() 結(jié)合使用
選擇最后一個(gè)元素不是footer的body
body:not(:has(footer:last-child)) {
}
3. :any-link
目前，我們可以使用：link和：visited表明鏈接的訪問狀態(tài)。這個(gè)更進(jìn)一步，它會(huì)檢查href的是否在用戶的瀏覽歷史中存在，以確定是否一個(gè)給定的鏈接是否已被訪問。
:link, :visited {
color: blue;
}
建議用 level 4 選擇器，可以直接這樣應(yīng)用，上述代碼等價(jià)于：
:any-link {
color: blue;
}
4. :scoped
直到level 4選擇器，CSS被賦予一個(gè)全局范圍。換句話說，如果你添加下面的CSS：
div {
color: #444;
}
所有的div將應(yīng)用的 color：#444 的樣式規(guī)則（這里假設(shè)沒有被復(fù)寫的情況下）。Level 4選擇器 允許將樣式和風(fēng)格限定于一個(gè)元素標(biāo)簽內(nèi)：
<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>
在這個(gè)例子中，我們已將應(yīng)用范圍到限定在aside元素中。在這種標(biāo)記風(fēng)格將只適用于父元素下的子元素。
5. :matches(selector1, selector2)
:matches 偽元素選擇器可以讓我們檢查，一個(gè)元素所有在列表中匹配的子元素。例如，如果你想針對所有article下的，段落和H2標(biāo)簽和鏈接，你可以這樣寫：
article :matches(h2, a, p) {
}
這取代了以前更加詳細(xì)的語法：
article a, article h2, article p {
}
6. 延伸選擇器>>
你可能熟悉的空格字符讓我們應(yīng)用到元素的后代上，比如一個(gè)div內(nèi)的所有鏈接：
div a {
}
但是到現(xiàn)在為止，我們還沒有看到一個(gè)明確的后代選擇符。 level 4 添加了一個(gè) >>
但是請注意，這會(huì)導(dǎo)致不必要的多余的字符，它與一個(gè)空格是等價(jià)的。
7. Table In-Column 選擇器
這是給table元素新加的一個(gè)功能，我們先來看一個(gè)基本的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>
給水平分組元素（即：同一行中）應(yīng)用樣式很簡單。但給垂直的元素是整體應(yīng)用樣式有些麻煩。
你為了給 personnel-info 這一列添加樣式風(fēng)格，可以使用Level 4的 || 選擇符。在||選擇符可以針對一列下的TD元素應(yīng)用樣式，如：
.personnel-info || td {
}
結(jié)論
Level 4封裝的選擇器功能非常強(qiáng)大。但是這些草稿還沒有完全定稿，還有變化的可能，當(dāng)然，他們正式發(fā)布的時(shí)侯，我們將再次介紹！
