css4激動人心的新特性及瀏覽器支持度

CSS3的選擇器提供了不少像:nth-child這樣有用的選擇器，而且獲得瀏覽器支持。CSS的第四代 選擇器CSS4選擇器），經咱們帶來了更多有用的選擇器。

 

---

1.否認僞類:not

否認僞類選擇器其實在CSS3選擇器中就出現了，只不過CSS4選擇器對否認僞類選擇器升級了。在CSS3中，你能夠經過否認僞類選擇器不去選中你不須要用到的CSS樣式的元素。好比說，你想除了.intro的段落以外文本都不加粗，你就能夠這樣使用僞類選擇器。

p:not(.intro) { font-weight: normal; }

在CSS4選擇器中，能夠傳入一個逗號(,)分隔的列表選擇器：

p:not(.intro, blockquote) { font-weight: normal; }

 

---

2.匹配任何僞類:matches

這個僞類意味着，能夠將規則應用到一個組合選擇器中，如：

p:matches(.alert, .error, .warn) { color: red; }

帶有隻要元素帶<p>帶有.alert、.error和.warn中任何一個類名，文本顏色都將會是red。

你能夠在css4-selectors.com網站上測試你的瀏覽器是否支持這些CSS4選擇器。這也是一個資源網站，你能夠在這個站上找到將要添加的選擇器。

 

---

3.關係僞類:has

這個選擇器經過一個參數從一個列表選擇器中匹配到相對應的元素。有一個最易說明的示例，在這個例子中任何一個包含<img>的<a>連接都會加上一個黑色的邊框：

a:has( > img ) { border: 1px solid #000; }

在下面這個示例中，使用:has和:not結合在一塊兒，選擇不包含段落<p>的<li>元素：

li:not(:has(p)){ padding-bottom: 1em; }

 

---

4.表單限制僞類 :required：optional

匹配表單項中必選項與可選項。

input:required { color:#f30; }

 

---

5.可讀可寫僞類 :read-write、:read-only

大部分元素都是可讀不可寫的，因此都是 :read-only；像 text input 這些值能夠改變的，和 HTML5 中設置了 contenteditable 的元素其自己是可改變的，這些被認爲是具備寫屬性的，因此是 :read-write

:read-write { font-family: Georgia; }

 

---

6. :any-link

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

:link, :visited {

color: blue;

}

css4 ，能夠直接這樣應用，上述代碼等價於：

:any-link {

color: blue;

}

 

---

7.:scoped

css4選擇器，CSS被賦予一個全局範圍。換句話說，若是你添加下面的CSS：

div {

color: #444;

}

全部的div將應用的 color：#444 的樣式規則（這裏假設沒有被複寫的狀況下）。css4選擇器 容許將樣式和風格限定於一個元素標籤內：

<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元素中。在這種標記風格將只適用於父元素下的子元素。

 

---

8.css網格佈局

網格佈局爲咱們建立了相似於表格佈局的結構，然而，咱們可使用CSS而非HTML中所描述的選擇器來建立佈局，經過媒體查詢來重定義佈局以適應不一樣的上下文內容。這樣咱們就能夠正確區分視覺和源碼的元素順序。做爲一個設計師，你能夠自由地改變頁面元素的位置來適應不一樣斷點下的佈局，而沒必要爲你響應式設計去調整結構。與HTML中基於表格的佈局不一樣，網格佈局容許你堆疊元素。所以，在須要的狀況下，一個元素能夠重疊另外一元素。

 

劇透點到爲止，css4更多新特性請等待官方發佈新版本。

---

更多angular1/2/四、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。