<!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>
