475
css4—第4代選擇器
曆史前進的步伐是不會停止的，緊跟著CSS3，新的CSS4也即將問世，它正由W3C編輯團隊研發中。從曆史的角度看，CSS的發展和web瀏覽器的發展是相互獨立的，它們是並行進步的。這就導致不同的瀏覽器支持不同的CSS規範。但是回到CSS4中，W3C周期性地更新一個CSS4規範，並且我想第一時間給你提供關於已經包含在CSS4中的一些基本信息。
在CSS4中引進了許多的新變化。沒有新的虛元素被加進去，似乎將在以後將它們加入到其他的模塊中。但是關注最多的就是虛類的發展。下麵的元素被添加到了CSS4（當前時刻）：邏輯聯合，元素和屬性選擇器，新的虛類，聯合器和結構性選擇器。下麵將重點介紹它們。
邏輯聯合：反麵和匹配任意虛類
在CSS3中，反麵虛類隻能用於簡單選擇器，虛類，標簽，身份標識（id），類和類選擇器參數。虛元素和聯合體（如UL LI或者UL>LI）並不支持，我們也不能反虛類（並不是在其自身裏麵）。但是在CSS4中，：not()可以運用於一個選擇器列和複雜選擇器中。現在，選擇器列表不在被劃分到每個選擇器的獨立代碼塊中了。
p:not(.active, .visible) {color: yellow;}
同樣適用於匹配類中（一個新的虛類，它允許匹配一個特定元素的樣式）。你可以使用匹配虛類將選擇器組合起來，使用一行匹配代碼將它們組合起來。
article:matches(.active, .visible) {background: green;}
屬性選擇器：大小寫敏感
目前在CSS4中，使用在中括號結束之前的i身份標識時，屬性大小不再敏感了，例如：
[frame=hsides i] { border-style: solid none; }屬性“hsides”將會作用於“frame”，無論此屬性的形式是“HSIDES”還是“hsides”或者“Hsides”等。並且這也同樣作用於XML的大小寫敏感的屬性值。這在避免漫長的Debug是很有幫助的。
位置虛類
語言虛類
在新的CSS4中有另一個虛類，即:dir。作為一個方向性的虛類，它用於HTML5來幫助我們決定元素的方向，和其他一些因素（比如周圍的文本）。A:dir(rtl)虛類將會讓一個元素從右到左的朝向，而a:dir(ltr）將會給一個元素從左向右的朝向。注意，:dir與[dir=..]是完全不同的東西，因為:dir匹配的值是取決於UA的。
在語言虛類中的:lang有了新的變化。目前，:lang可以執行通配符匹配。例如，:lang(de-DE)將匹配所有符合的語言標簽，並不僅僅隻有'de-DE'和'de-DE-1996'。在主要語言（或者第一個子標簽）的統配匹配，使用一個星號來完成。例如，*-CH將會匹配’de-CH','it-CH'，等等。
查看如下例子，其描述如下：
html:lang(fr-be) html:lang(de) :lang(fr-be) > q :lang(de) > q
位置虛類指向訪問者在你網站上的位置（不要將其與地理編碼混淆了）。位置虛類有了新的變化。其中有一個名為:any-link的超鏈接虛類，它表示任何一個超連接的source anchor（根節點？）元素。
第二個是:local-link虛類，它根據訪問者在站點中的位置來裝飾超鏈接的樣式。此虛類也可以區分外部和內部超鏈接。在沒有功能性的使用中，:local-link指向的是一個具有其目標和此元素文檔URL相同的source anchor hyperlink（真的好難翻譯）的元素。帶功能性的使用中，:local-link可以在一個等級體係中，如下所示：
- :local-link(0) – 代表一個連接元素，其target和文檔的URL是在同一個源中。
- :local-link(1) – 代表一個連接元素，其target具有相同源和第一個路徑片段。
- :local-link(2) – 代表一個鏈接元素，其target具有相同源和第一個、第二個路徑片段。
- 等等
最後更新：2017-04-03 12:53:51