《HTML5移动开发指南》——笔记6（CSS3新特性）

CSS3技术最适合在移动Web开发中使用的特性：

• 增强的选择器
• 阴影
• 强大的背景设置
• 圆角边框

1.选择器

1.1属性选择器（分为四种类型）

• 完全匹配属性选择器

<div id="article"></div>
<style>
[id=article] {
     color:#000;
}
</style><strong>
</strong>

• 包含匹配选择器

语法：[attribute*=value]  attribute是属性名，value是属性的值

<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id*=article] {
     color:red;
}
</style>

• 首字符匹配选择器

<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id^=article] {
     color:red;
}
</style>

• 尾字符匹配选择器

<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id$=article] {
     color:red;
}
</style>

1.2伪类选择器

• first-line伪类选择器
• first-letter伪类选择器
• root选择器
• not选择器
• empty选择器
• target选择器

before和after，一般可以用来清除浮动，给父元素设置。

.parent:before {
      content:"";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}
* html .parent{zoom:1;} /* IE6 */
*+html .parent{zoom:1;} /* IE7 */

2.阴影

box-shadow:3px 4px 2px #000;
-webkit-box-shadow:3px 4px 2px #000;
-moz-box-shadow:3px 4px 2px #000;

/*text-shadow基本得到大多数游览器支持*/
text-shadow: 5px -10px 5px red;

3.背景

4.圆角边框

<span style="font-size:14px;">border-radius：5px;
-webkit-border-radius：5px;
-moz-border-radius：5px;</span>