css2.1發布至今已經有7年的歷史，在這7年裡，網際網路的發展 已經發生了翻天覆地的變化。css2.1有時候難以滿足快速提高效能、提公升使用者體驗的web應用的需求。css3標準的出現就是增強css2.1的功能， 減少的使用次數以及解決html頁面上的特殊效果。
css3作為在html頁面擔任頁面布局和頁面裝飾的技術，可以更加有效地對頁面布局、字型、顏色、背景或其他動畫效果實現精確的控制。
目前，css3是移動web開發的主要技術之一，它在介面修飾方面占有重要的地位。由於移動裝置的web瀏覽器都支援css3，對於不同瀏覽器之間的相容性問題，它們之間的差異非常小。不過對於移動web瀏覽器的某些css特性，仍然需要做一些相容性的工作。
當前，css3技術最適合在移動web開發中使用的特性包括：
接下來我們將會重點介紹如何使用這些css3特性來實現移動web介面。
選擇器選擇器是css3中乙個重要的部分，通過使用css3的選擇器，可以提高開發人員的工作效率。我們將為讀者介紹屬性選擇器和偽類選擇器的基本用法。
屬性選擇器
在css3中，我們可以使用html元素的屬性名稱選擇性地定義css樣式。其實，屬性選擇器早在css2中就被引入了，其主要作用就是為帶有指定屬性的html 元素設定樣式。例如，通過指定div元素的id屬性，設定相關樣式。屬性選擇器一共分為4種匹配模式選擇器：
1．完全匹配屬性選擇器
其含義就是完全匹配字串。當div元素的id屬性值為test時，利用完全匹配選擇器選擇任何id值為test的元素都使用該樣式。如下**通過指定id值將屬性設定為紅色字型：
測試完全匹配屬性選擇器
2．包含匹配選擇器
包含匹配比完全匹配範圍更廣。只要元素中的屬性包含有指定的字串，元素就使用該樣式。其語法是：[attribute*=value]。其中attribute指的是屬性名，value指的是屬性值，包含匹配採用「*=」符號。
例如下面三個div元素都符合匹配選擇器的選擇，並將div元素內的字型設定為紅色字型：
測試完全匹配屬性選擇器
測試完全匹配屬性選擇器
測試完全匹配屬性選擇器
3．首字元匹配選擇器
首字元匹配就是匹配屬性值開頭字元，只要開頭字元符合匹配，則元素使用該樣式。其語法是：[attribute^=value]。其中 attribute指的是屬性名，value指的是屬性值，首字元匹配採用「^=」符號。例如下面三個div元素使用首字元匹配選擇器後，只有id為 article和article1的元素才被設定為紅色字型。
測試完全匹配屬性選擇器
測試完全匹配屬性選擇器
測試完全匹配屬性選擇器
4．尾字元匹配選擇器
尾字元匹配跟首字元匹配原理一樣。尾字元只匹配結尾的字串，只要結尾字串符合匹配，則元素使用該樣式。其語法是： [attribute$=value]。其中attribute指的是屬性名，value指的是屬性值，尾字元匹配採用「$=」符號。例如下面三個div 元素使用尾字元匹配選擇器時，只有id為subarticle的元素才被設定為紅色字型。
測試完全匹配屬性選擇器
測試完全匹配屬性選擇器
測試完全匹配屬性選擇器
偽類選擇器
在css3選擇器中，偽類選擇器種類非常多。然後在css2.1時代，偽類選擇器就已經存在，例如超連結的四個狀態選擇器：a:link、a:visited、a:hover、a:active。css3增加了非常多的選擇器，其中包括:
這些偽類選擇器是css3新增的選擇器，它們都能得到在android和ios平台下web瀏覽器的支援。現在我們就為你介紹這部分的選擇器。
1．before
before偽類元素選擇器主要的作用是在選擇某個元素之前插入內容，一般用於清除浮動。目前，before選擇器得到支援的瀏覽器包括：ie8+、firefox、chrome、safari、opera、android browser和ios safari。
before選擇器的語法是：
元素標籤:before
例如，在p元素之前插入「文字」：
p.before
2．after
after偽類元素選擇器和before偽類元素選擇器原理一樣，但after是在選擇某個元素之後插入內容。
目前，before選擇器得到支援的瀏覽器包括：ie8+、firefox、chrome、safari、opera、android browser和ios safari。
after選擇器的語法是：
元素標籤:after
3．first-child
指定元素列表中第乙個元素的樣式。語法如下：
li:first-child
4．last-child
和first-child是同型別的選擇器。last-child指定元素列表中最後乙個元素的樣式。語法如下：
li:last-child
5．nth-child和nth-last-child
nth-child和nth-last-child可以指定某個元素的樣式或從後數起某個元素的樣式。例如：
//指定第2個li元素
li:nth-child(2){}
//指定倒數第2個li元素
li:nth-last-child{}
//指定偶數個li元素
li:nth-child(even){}
//指定奇數個li元素
li:nth-child(odd){}
在此我們只介紹了部分常用的css選擇器，實際上選擇器並不止這幾種，其餘的選擇器不再詳細介紹，有興趣的讀者可以閱讀css3相關資料。
本文節選自《html5移動web開發指南》一書，本書由唐俊開著，由電子工業出版社正式出版。
來自>
移動Web介面樣式 CSS3
移動web介面樣式 css3 css2.1發布至今已經有7年的歷史，在這7年裡，網際網路的發展已經發生了翻天覆地的變化。css2.1有時候難以滿足快速提高效能 提公升使用者體驗的web應用的需求。css3標準的出現就是增強css2.1的功能，減少的使用次數以及解決html頁面上的特殊效果。css3作...
3 用CSS3設計移動頁面樣式
一 簡介 css 用於定義html文件外觀，可以針對列印輸出 web頁面顯示或特定移動裝置來定製html樣式。同樣的html內容在不同的平台顯示可能截然不同 一 建立css樣式表 1 css由附加了樣式屬性的乙個或多個選擇器組成 如 p 其中p為選擇器 colr red 為 樣式屬性,若果需要加入第...
CSS3布局樣式
css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的...