好程序員web前端分享Css3的概念和優點

好程序員web前端分享Css3的概念和優點,CSS3是css技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。

css3的優勢：CSS3將徹底向後兼容，因此沒有必要修改如今的設計來讓它們繼續運做。網絡瀏覽器也還將繼續支持CSS2。對咱們來講，CSS3主要的影響是將可使用新的可用的選擇器和屬性，這些會容許實現新的設計效果（譬如動態和漸變），並且能夠很簡單的設計出如今的設計效果（好比說使用分欄）

漸進加強和優雅降級

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。 
優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。 
區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

CSS3選擇器

1、層級選擇器

E>F 子選擇器 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F 相鄰兄弟選擇器 選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素的後面

E~F 通用選擇器 選擇匹配的F元素，且位於匹配的E元素後的全部匹配的F元素

2、屬性選擇器

一、E[attr]：只使用屬性名，但沒有肯定任何屬性值；

二、E[attr="value"]：指定屬性名，並指定了該屬性的屬性值；

三、E[attr~="value"]：指定屬性名，而且具備屬性值，此屬性值是一個詞列表，而且以空格隔開，其中詞列表中包含了一個value詞，並且等號前面的「〜」不能不寫

四、E[attr^="value"]：指定了屬性名，而且有屬性值，屬性值是以value開頭的；

五、E[attr$="value"]：指定了屬性名，而且有屬性值，並且屬性值是以value結束的

六、E[attr*="value"]：指定了屬性名，而且有屬性值，並且屬值中包含了value；

七、E[attr|="value"]：指定了屬性名，而且屬性值是value或者以「value-」開頭的值（好比說zh-cn）;

3、僞類選擇器

一、結構性僞類選擇器

X:first-child 匹配子集的第一個元素。IE7就能夠支持
X:last-child匹配父元素中最後一個X元素
X:nth-child(n)用於匹配索引值爲n的子元素。索引值從1開始
X:only-child這個僞類通常用的比較少，好比上述代碼匹配的是div下的有且僅有一個的p，也就是說，若是div內有多個p，將不匹配。
X:nth-of-type(n)匹配同類型中的第n個同級兄弟元素X
X:only-of-type匹配屬於同類型中惟一兄弟元素的X
X:first-of-type匹配同級兄弟元素中的第一個X元素
X:nth-last-child(n)從最後一個開始算索引。
X:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素X
X:root匹配文檔的根元素。在HTML（標準通用標記語言下的一個應用）中，根元素永遠是HTML
X:empty匹配沒有任何子元素（包括包含文本）的元素X

二、目標僞類選擇器

E:target 選擇匹配E的全部元素，且匹配元素被相關URL指向

三、UI 元素狀態僞類選擇器

E:enabled 匹配全部用戶界面（form表單）中處於可用狀態的E元素
E:disabled 匹配全部用戶界面（form表單）中處於不可用狀態的E元素
E:checked 匹配全部用戶界面（form表單）中處於選中狀態的元素E
E:selection 匹配E元素中被用戶選中或處於高亮狀態的部分

四、否認僞類選擇器

E:not(s) （IE6-8瀏覽器不支持:not()選擇器。）
匹配全部不匹配簡單選擇符s的元素E

五、動態僞類選擇器

E:link
連接僞類選擇器 
  選擇匹配的E元素，並且匹配元素被定義了超連接並未被訪問過。經常使用於連接描點上 

E:visited  
連接僞類選擇器
選擇匹配的E元素，並且匹配元素被定義了超連接並已被訪問過。經常使用於連接描點上 

E:active
用戶行爲選擇器
選擇匹配的E元素，且匹配元素被激活。經常使用於連接描點和按鈕上 

E:hover
用戶行爲選擇器
選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及如下瀏覽器僅支持a:hover 

E:focus 用戶行爲選擇器 選擇匹配的E元素，並且匹配元素獲取焦點