<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*=S CSS3 */
.box1{ width:92px; height:24px; border:1px solid #6cace1; font-size:14px; text-align:center; line-height:24px; background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#87c9fd), to(#4d99da), color-stop(0.49,#6db6f2), color-stop(0.5,#5aa9ea)); text-shadow:1px 1px 1px #fff; -webkit-border-radius:5px; -webkit-box-shadow:2px 2px 5px #ddd;}
/*
background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
当x1等于x2，y1等于y2，实现没有渐变，取from色，即" from(颜色值) "；
*/
.box2{ width:60px; height:60px; background-color:#ddd; text-align:center; line-height:60px; -webkit-border-radius:60px;}
.box3{ width:0; height:0; border-top:10px solid transparent; border-right:10px solid #ddd; border-bottom:10px solid transparent;}
.box4{ width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid #ddd;}
.box5{ width:0; height:0; border-top:10px solid #ddd; border-right:10px solid transparent; border-left:10px solid transparent;}
.box6{ width:0; height:0; border-right:10px solid transparent; border-bottom:10px solid #ddd; border-left:10px solid transparent;}
.box7{ width:0; height:0; border-top:20px solid #ddd; border-right:12px solid transparent; border-left:12px solid transparent;}
.box8{ width:200px; height:200px; background:url(mb.gif) repeat-x top left,url(mb.gif) repeat-y top left,url(mb.gif) repeat-y top right,url(mb.gif) repeat-x bottom left;}
.box9{ width:200px; height:200px; background-color:#ff0; opacity:0.5; -webkit-border-radius:10px; -webkit-box-shadow:2px 2px 5px #f00;}
/*=E CSS3 */
/*=S 选择器 */
#box-1 p:nth-child(2){ color:#f00;}
#box-2 p:nth-last-child(1){ color:#f00;}
#box-3 p:nth-of-type(3){ color:#f00;}
#box-4 p:nth-last-of-type(2){ color:#f00;}
#box-5 p:last-child{ color:#f00;}
#box-6 p:first-of-type{ color:#f00;}
#box-7 p:only-child{ color:#f00;}
#box-8 p:only-of-type{ color:#f00;}
#box-9 strong:empty{ display:block; width:200px; height:20px; background-color:#f00;}
#box-10 input:checked{ margin:0 50px;}
#box-11 input:enabled{ background-color:#f00;}
#box-12 input:disabled{ border:1px solid #f00; background-color:#eee;}
#box-13 p::selection{ background-color:#0f0;}
#box-14 p:not(.bg){ background-color:#0f0;}
#box-15 div ~ p{ background-color:#0f0;}
#box-16 > p{ margin-left:10px;}
#box-17 + p{ font-weight:bold;}
p[title^="val"]{ color:#f00;}
p[title$="val"]{ font-weight:bold;}
p[title*="val"]{ text-decoration:underline;}
html:root{ background-color:#eee;}
/*=E 选择器 */
</style>
</head>
<body>
<!--=S CSS3 -->
<div class="box1">加入收藏</div>
<hr />
<div class="box2">提交</div>
<hr />
<div class="box3"></div>
<hr />
<div class="box4"></div>
<hr />
<div class="box5"></div>
<hr />
<div class="box6"></div>
<hr />
<div class="box7"></div>
<hr />
<div class="box8"></div>
<hr />
<div class="box9"></div>
<hr />
<!--=E CSS3 -->
<!--=S 选择器 -->
<div id="box-1">
<p>匹配父元素中的第n个子元素E</p>
<p>匹配父元素中的第n个子元素E</p>
<p>匹配父元素中的第n个子元素E</p>
</div>
<hr />
<div id="box-2">
<p>匹配父元素中的倒数第n个结构子元素E</p>
<p>匹配父元素中的倒数第n个结构子元素E</p>
<p>匹配父元素中的倒数第n个结构子元素E</p>
</div>
<hr />
<div id="box-3">
<p>匹配同类型中的第n个同级兄弟元素E</p>
<p>匹配同类型中的第n个同级兄弟元素E</p>
<p>匹配同类型中的第n个同级兄弟元素E</p>
</div>
<hr />
<div id="box-4">
<p>匹配同类型中的倒数第n个同级兄弟元素E</p>
<p>匹配同类型中的倒数第n个同级兄弟元素E</p>
<p>匹配同类型中的倒数第n个同级兄弟元素E</p>
</div>
<hr />
<div id="box-5">
<p>匹配父元素中最后一个E元素</p>
<p>匹配父元素中最后一个E元素</p>
<p>匹配父元素中最后一个E元素</p>
</div>
<hr />
<div id="box-6">
<p>匹配同级兄弟元素中的第一个E元素</p>
<p>匹配同级兄弟元素中的第一个E元素</p>
<p>匹配同级兄弟元素中的第一个E元素</p>
</div>
<hr />
<div id="box-7">
<div>
<p>匹配属于父元素中唯一子元素的E</p>
</div>
<div>
<p>匹配属于父元素中唯一子元素的E</p>
<p>匹配属于父元素中唯一子元素的E</p>
</div>
</div>
<hr />
<div id="box-8">
<div>
<p>匹配属于同类型中唯一兄弟元素的E</p>
</div>
<div>
<p>匹配属于同类型中唯一兄弟元素的E</p>
<p>匹配属于同类型中唯一兄弟元素的E</p>
</div>
</div>
<hr />
<div id="box-9">
<p>匹配没有任何子元素（包括text节点）的元素E</p>
<strong></strong>
</div>
<hr />
<div id="box-10">
<form method="" action="">
<input type="radio" name="" checked="checked" />
<input type="radio" name="" />
</form>
</div>
<hr />
<div id="box-11">
<form method="" action="">
<input type="text" value="默认状态下的表单都是enabled" />
</form>
</div>
<hr />
<div id="box-12">
<form method="" action="">
<input type="text" value="" disabled="disabled" />
</form>
</div>
<hr />
<div id="box-13">
<p>ctrl+a 全选看效果或者使用鼠标选择文字看效果</p>
</div>
<hr />
<div id="box-14">
<p>匹配所有不匹配简单选择符s的元素E</p>
<p class="bg">匹配所有不匹配简单选择符s的元素E</p>
<p>匹配所有不匹配简单选择符s的元素E</p>
<p class="bg">匹配所有不匹配简单选择符s的元素E</p>
</div>
<hr />
<div id="box-15">
<div>
<p>匹配E元素之后的F元素</p>
<p>匹配E元素之后的F元素</p>
</div>
<p>匹配E元素之后的F元素</p>
<p>匹配E元素之后的F元素</p>
<div>匹配E元素之后的F元素</div>
<p>匹配E元素之后的F元素</p>
</div>
<hr />
<div id="box-16">
<p>儿子</p>
<p>儿子</p>
<p>儿子<p>孙子</p></p>
</div>
<hr />
<div id="box-17">
<p>儿子</p>
</div>
<p>兄弟</p>
<p>兄弟</p>
<hr />
<p title="value">匹配具有att属性、且值以val开头的E元素</p>
<hr />
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p>
<hr />
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p>
<hr />
<p>匹配文档的根元素。在HTML中，根元素永远是HTML</p>
<hr />
<!--=E 选择器 -->
</body>
</html>
