移动Web界面样式-CSS3
CSS2.1发布至今已经有7年的历史，在这7年里，互联网的发展 已经发生了翻天覆地的变化。CSS2.1有时候难以满足快速提高性能、提升用户体验的Web应用的需求。CSS3标准的出现就是增强CSS2.1的功能， 减少图片的使用次数以及解决HTML页面上的特殊效果。
在HTML5逐渐成为IT界最热门话题的同时，CSS3也开始慢慢地普及起来。目前， 很多浏览器都开始支持CSS3部分特性，特别是基于Webkit内核的浏览器，其支持力度非常大。在Android和iOS等移动平台下，正是由于 Apple和Google两家公司大力推广HTML5以及各自的Web浏览器的迅速发展，CSS3在移动Web浏览器下都能到很好的支持和应用。
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值将属性设定为红色字体：
<div id=”article”>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id=article]{
color:red;
}
</style>
2．包含匹配选择器
包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串，元素就使用该样式。其语法是：[attribute*=value]。其中attribute指的是属性名，value指的是属性值，包含匹配采用“*=”符号。
例如下面三个div元素都符合匹配选择器的选择，并将div元素内的字体设置为红色字体：
<div id=”article”>测试完全匹配属性选择器</div>
<div id=”subarticle”>测试完全匹配属性选择器</div>
<div id=”article1″>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id*=article]{
color:red;
}
</style>
3．首字符匹配选择器
首字符匹配就是匹配属性值开头字符，只要开头字符符合匹配，则元素使用该样式。其语法是：[attribute^=value]。其中 attribute指的是属性名，value指的是属性值，首字符匹配采用“^=”符号。例如下面三个div元素使用首字符匹配选择器后，只有id为 article和article1的元素才被设置为红色字体。
<div id=”article”>测试完全匹配属性选择器</div>
<div id=”subarticle”>测试完全匹配属性选择器</div>
<div id=”article1″>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id^=article]{
color:red;
}
</style>
4．尾字符匹配选择器
尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串，只要结尾字符串符合匹配，则元素使用该样式。其语法是： [attribute$=value]。其中attribute指的是属性名，value指的是属性值，尾字符匹配采用“$=”符号。例如下面三个div 元素使用尾字符匹配选择器时，只有id为subarticle的元素才被设置为红色字体。
<div id=”article”>测试完全匹配属性选择器</div>
<div id=”subarticle”>测试完全匹配属性选择器</div>
<div id=”article1″>测试完全匹配属性选择器</div>
<style type=”text/css”>
[id$=article]{
color:red;
}
</style>
伪类选择器
在CSS3选择器中，伪类选择器种类非常多。然后在CSS2.1时代，伪类选择器就已经存在，例如超链接的四个状态选择器：a:link、a:visited、a:hover、a:active。CSS3增加了非常多的选择器，其中包括:
- first-line伪元素选择器
- first-letter伪元素选择器
- root选择器
- not选择器
- empty选择器
- target选择器
这些伪类选择器是CSS3新增的选择器，它们都能得到在Android和iOS平台下Web浏览器的支持。现在我们就为你介绍这部分的选择器。
1．before
before伪类元素选择器主要的作用是在选择某个元素之前插入内容，一般用于清除浮动。目前，before选择器得到支持的浏览器包括：IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。
before选择器的语法是：
元素标签:before{
content:”插入的内容”
}
例如，在p元素之前插入“文字”：
p.before{
content:”文字”
}
2．after
after伪类元素选择器和before伪类元素选择器原理一样，但after是在选择某个元素之后插入内容。
目前，before选择器得到支持的浏览器包括：IE8+、Firefox、Chrome、Safari、Opera、Android Browser和iOS Safari。
after选择器的语法是：
元素标签:after{
content:”插入的内容”
}
3．first-child
指定元素列表中第一个元素的样式。语法如下：
li:first-child{
color:red;
}
4．last-child
和first-child是同类型的选择器。last-child指定元素列表中最后一个元素的样式。语法如下：
li:last-child{
color:red;
}
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开发指南》一书，本书由唐俊开著，由电子工业出版社正式出版。
来自 <http://www.programmer.com.cn/12496/>
