大前端基礎之Css3新增選擇符

大前端基礎之Css3新增的選擇符
CSS3是css技術的升級版本，CSS3語言開發是朝着模塊化發展的。以前的規範作爲一個模塊實在是太龐大而且比較複雜，所以，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。
Css3的優點：CSS3將完全向後兼容，所以沒有必要修改現在的設計來讓它們繼續運作。網絡瀏覽器也還將繼續支持CSS2。對我們來說，CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現新的設計效果（譬如動態和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）
其基本特點可以分爲兩個特點：
**漸進增強 progressive enhancement：**針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
**優雅降級 graceful degradation：*一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
兩者的區別：優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。
那下面我就說說CSS3的選擇符:
大致可以如圖：

1、屬性選擇器：
1）E[attr]：只使用屬性名，但沒有確定任何屬性值
2）E[attr=“value”]：指定屬性名，並指定了該屬性的屬性值
3）E[attr~=“value”]：指定屬性名，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“〜”必須的
4）E[attr^=“value”]：指定了屬性名，並且有屬性值，屬性值是以value開頭的
5）E[attr$=“value”]：指定了屬性名，並且有屬性值，而且屬性值是以value結束
6）E[attr=“value”]：指定了屬性名，並且有屬性值，而且屬值中包含了value
​ 7）E[attr|=“value”]：指定了屬性名，並且屬性值僅是value或者以“value-”開頭的值（比如說left-con）
屬性選擇符案例如圖：


2、僞類選擇器
1）結構性僞類選擇器
X:first-child 匹配子集的第一個元素。IE7就可以支持
X:last-child 匹配父元素中最後一個X元素
X:nth-child(n) 用於匹配索引值爲n的子元素。索引值從1開始
X:only-child 這個僞類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個的p，也就是說，如果div內有多個p，將不匹配。 (唯一的一個子元素)
X:nth-last-child(n) 從最後一個開始算索引。
注：(n) 括號裏可以指定參數值，也可以寫表達式
如：2n \2n+1 \ odd \even位置和標籤都要匹配上
X:first-of-type 匹配同級(相同的元素)兄弟元素中的第一個X元素
​ X:last-of-type 匹配同級兄弟元素中的最後一個X元素
​ X:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素X
​ X:only-of-type 匹配屬於同類型中唯一兄弟元素的X
​ X:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素X
:root匹配文檔的根元素。在HTML（標準通用標記語言下的一個應用）中，根元素永遠是HTML
X:empty匹配沒有任何子元素（包括包含文本）的元素X


2）目標僞類選擇器:
E:target 選擇匹配E的所有元素，且匹配元素被相關URL指向 (如：錨點鏈接)
動態僞類選擇器
E:link鏈接僞類選擇器
說明：選擇匹配的E元素，而且匹配元素被定義了超鏈接並未被訪問過。常用於鏈接描點上
E:visited鏈接僞類選擇器
說明：選擇匹配的E元素，而且匹配元素被定義了超鏈接並已被訪問過。常用於鏈接描點
E:active用戶行爲選擇器
說明：選擇匹配的E元素，且匹配元素被激活。常用於鏈接描點和按鈕上
E:hover用戶行爲選擇器
說明：選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover
E:focus用戶行爲選擇器
說明：選擇匹配的E元素，而且匹配元素獲取焦點
3）UI 元素狀態僞類選擇器
E:enabled匹配所有用戶界面（form表單）中處於可用狀態的E元素
E:disabled匹配所有用戶界面（form表單）中處於不可用狀態的E元素
E:checked匹配所有用戶界面（form表單）中處於選中狀態的元素E
默認選中： checked 禁用：disabled 可用：enabled
E::selection 匹配E元素中被用戶選中或處於高亮狀態的部分層級選擇器
4：後代選擇器
E>F
子選擇器
選擇匹配的F元素，且匹配的F元素是所匹配的E元素的子元素
E+F
相鄰兄弟選擇器(找後面的相鄰的第一個同輩元素)
選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素的後面
E~F
通用選擇器 (找後面的所有同輩元素)
選擇匹配的F元素，且位於匹配的E元素後的所有匹配的F元素