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