CSS3的新增选择器
一、兄弟选择器：选择E元素所有兄弟元素F。
<style> p~p{ color:#f00;} </style> </head> <body> <div><!--该div是父元素--> <p>中国十大杰出人物</p> <p>①别人家的孩子</p> <p>②别人家的爸爸</p> <p>③别人家的妈妈</p> <p>④别人家的老公</p> <p>⑤别人家的老婆</p> <p>⑥别人家的公公</p> <p>⑦别人家的婆婆</p> <p>⑧别人家的公司</p> <p>⑨别人家的领到</p> <p>⑩别人家的员工</p> </div> <!--注意:兄弟选择器选中的是【E标签之后】的所有兄弟F上面例子表示选中了第一个p标签后面的所有p标签--> </body>
<style> h4~p{ color:#f00;} </style> </head> <body> <div><!--该div是父元素--> <p>中国十大杰出人物</p> <p>①别人家的孩子</p> <p>②别人家的爸爸</p> <p>③别人家的妈妈</p> <h4>④别人家的老公</h4> <p>⑤别人家的老婆</p> <p>⑥别人家的公公</p> <p>⑦别人家的婆婆</p> <p>⑧别人家的公司</p> <p>⑨别人家的领到</p> <p>⑩别人家的员工</p> </div> <!--注意:兄弟选择器选中的是【E标签之后】的所有兄弟F,上面例子表示选中了h4标签后面所有的p标签，之前的没有选中--> </body>
二、伪类选择器
1、结构性伪类选择器
|
选择符
|
版本
|
简介
|
|
E:root
|
CSS3
|
匹配E元素在文档的根元素。
|
|
E:first-child
|
CSS2
|
匹配父元素的第一个子元素E。
|
|
E:last-child
|
CSS3
|
匹配父元素的最后一个子元素E。
|
|
E:only-child
|
CSS3
|
匹配父元素仅有的一个子元素E。
|
|
E:nth-child(n)
|
CSS3
|
匹配父元素的第n个子元素E。
|
|
E:nth-last-child(n)
|
CSS3
|
匹配父元素的倒数第n个子元素E。
|
|
E:first-of-type
|
CSS3
|
匹配同类型中的第一个同级兄弟元素E。
|
|
E:last-of-type
|
CSS3
|
匹配同类型中的最后一个同级兄弟元素E。
|
|
E:only-of-type
|
CSS3
|
匹配同类型中的唯一的一个同级兄弟元素E。
|
|
E:nth-of-type(n)
|
CSS3
|
匹配同类型中的第n个同级兄弟元素E。
|
|
E:nth-last-of-type(n)
|
CSS3
|
匹配同类型中的倒数第n个同级兄弟元素E。
|
|
E:empty
|
CSS3
|
匹配没有任何子元素（包括text节点）的元素E。
|
E:first-child：
<style> p:first-child{color:#f00;} </style> </head> <body> <div id="A"> <h4>我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我</h4> <p>我是父亲的第2个子元素</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素</p> <p>我是父亲的第5个子元素</p> </div> <hr /> <div id="B"> <p>我是父亲的第1个子元素，并且我是p标签，所以我被选中了</p> <p>我是父亲的第2个子元素</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素</p> <p>我是父亲的第5个子元素</p> </div> <!-- 注意： 1、写法是 p:first-child，而不是div:first-child 2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种 该选择器的匹配步骤： 1、找到页面中的p元素 (任何标签内部第一个出现p元素) 2、找到该p元素的父亲元素 (找到div元素 一个是id为A的 一个是id为B的) 3、检测找到的p元素的父元素的第一个子元素类型 是否是p标签。 (找到2个div中的第一个子元素，id为A的第一个子元素是h3， id为B的第一个子元素是p) id为A的div第1个子元素不是p标签：无法选中第一个子元素 id为B的div第1个子元素是p标签: 选中第一个子元素，定义颜色的样式对其生效 --> </body>
E:last-child：
<style> p:last-child{color:#f00;} </style> </head> <body> <div id="A"> <p>我是父亲的第1个子元素</p> <p>我是父亲的第2个子元素</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素</p> <h4>我是父亲的最后一个子元素，可惜我不是p标签，所以无法选中我</h4> </div> <hr /> <div id="B"> <p>我是父亲的第1个子元素</p> <p>我是父亲的第2个子元素</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素</p> <p>我是父亲的第5个子元素，并且我是p标签，所以我被选中了</p> </div> <!-- 注意： 1、写法是 p:last-child，而不是div:last-child 2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种 该选择器的匹配步骤： 1、找到页面中的p元素 (任何标签内部第一个出现p元素) 2、找到该p元素的父亲元素 (找到div元素 一个是id为A的 一个是id为B的) 3、检测找到的p元素的父元素的最后个子元素类型 是否是p标签。 (找到2个div中的最后一个子元素，id为A的最后一个子元素是h3， id为B的最后一个子元素是p) 结果： id为A的div最后1个子元素不是p标签：无法选中第一个子元素h3 id为B的div最后1个子元素是p标签: 选中最后一个子元素p，定义颜色的样式对其生效 --> </body>
E:nth-child(n) ：
<style> /*li:nth-child(7){color:#f00;} 选中指定序号(正序)第7个li被选中*/ /*li:nth-child(odd){color:#f00;} 选中奇odd偶even类型(正序)*/ /*li:nth-child(2n+1){color:#f00;} 选中自定义序列类型(正序)*/ </style> </head> <body> <ul> <li>我是爹地的第1个孩子</li> <li>我是爹地的第2个孩子</li> <li>我是爹地的第3个孩子</li> <li>我是爹地的第4个孩子</li> <li>我是爹地的第5个孩子</li> <li>我是爹地的第6个孩子</li> <li>我是爹地的第7个孩子</li> <li>我是爹地的第8个孩子</li> <li>我是爹地的第9个孩子</li> <li>我是爹地的第10个孩子</li> </ul> <!-- 这种选中方式是从父元素的角度查看所有的子元素，将所有子元素看做一个集合，并且编号， 然后从包含所有子元素的集合中选取指定序号的元素(并且该元素类型为指定类型)，注意和E:nth-of-type(n)的区别 假设: 样式 li:nth-child(5){color:#f00} 内容 <ul> <li>我是爹地的第1个孩子</li> <li>我是爹地的第2个孩子</li> <li>我是爹地的第3个孩子</li> <li>我是爹地的第4个孩子</li> <p>我是爹地的第5个孩子</p> 这是第五个元素 但是不是li标签，所以无法选中 <li>我是爹地的第6个孩子</li> <li>我是爹地的第7个孩子</li> <li>我是爹地的第8个孩子</li> <li>我是爹地的第9个孩子</li> <li>我是爹地的第10个孩子</li> </ul> --> </body>
E:nth-last-child(n)：
<style> li:nth-last-child(2){color:#f00;} /*选中指定序号(倒序)*/ /*li:nth-last-child(even){color:#f00;} 选中奇odd偶even类型(倒序)*/ /*li:nth-last-child(3n+1){color:#f00;} 选中自定义序列类型(倒序)*/ </style> </head> <body> <ul> <li>我是爹地的第1个孩子</li> <li>我是爹地的第2个孩子</li> <li>我是爹地的第3个孩子</li> <li>我是爹地的第4个孩子</li> <li>我是爹地的第5个孩子</li> <li>我是爹地的第6个孩子</li> <li>我是爹地的第7个孩子</li> <li>我是爹地的第8个孩子</li> <li>我是爹地的第9个孩子</li> <li>我是爹地的第10个孩子</li> </ul> <!-- 这种选中方式是从父元素的角度查看所有的子元素，将所有子元素看做一个集合，并且编号，然后从包含所有子元素的集合中选取指定序号(倒数)的元素(并且该元素类型为指定类型)，注意和E:nth-last-of-type(n)的区别 假设: 样式 li:nth-last-child(5){color:#f00} 内容 <ul> <li>我是爹地的第1个孩子</li> <li>我是爹地的第2个孩子</li> <li>我是爹地的第3个孩子</li> <li>我是爹地的第4个孩子</li> <li>我是爹地的第5个孩子</li> <p>我是爹地的第6个孩子</p>这是倒数第五个元素 但是不是li标签，所以无法选中 <li>我是爹地的第7个孩子</li> <li>我是爹地的第8个孩子</li> <li>我是爹地的第9个孩子</li> <li>我是爹地的第10个孩子</li> </ul> --> </body>
E:only-child：
<style> li:only-child{color:#f00;font-size:30px} </style> </head> <body> <ul id="A"> <li>我是父元素ul的唯一的子元素，独生子</li> </ul> <hr /> <ul id="B"> <li>我是父亲的第一个孩子，我不是独生子</li> <li>我是父亲的第二个孩子，我不是独生子</li> </ul> <!-- 当且仅当当指定元素是其父元素的唯一子元素的时候可以选中该子元素。这里选中了第一个ul下的li。如果都有两个li标签，就没法选中 --> </body>
E:first-of-type
<style> p:first-of-type{color:#f00;} </style> </head> <body> <div id="A"> <h4>我是父亲的第1个子元素</h4> <p>我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素</p> <p>我是父亲的第5个子元素</p> </div> <hr /> <div id="B"> <p>我是父亲的第1个子元素，我是父亲的第一个p标签所以我被选中了</p> <p>我是父亲的第2个子元素</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素</p> <p>我是父亲的第5个子元素</p> </div> <!-- 注意:of-type系列和child系列不同之处在于： child系列的元素序号是把父亲的所有子元素放在一个集合中，然后排序 例如: id="A"的div共有5个子元素，所以他们在child系列中的序号是 <div id="A"> ① <h4>我是父亲的第1个子元素</h4> ② <p> 我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了 </p> ③ <p>我是父亲的第3个子元素</p> ④ <p>我是父亲的第4个子元素</p> ⑤ <p>我是父亲的第5个子元素</p> </div> of-type系列的元素序号是把指定的元素类型的所有同类元素放在一个集合中，然后排序。 例如: id="A"的div共有5个子元素，但是p元素只有四个， 所以p元素在of-type系列中的序号是 <div id="A"> <h4>我是父亲的第1个子元素</h4> ① <p> 我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了 </p> ② <p>我是父亲的第3个子元素</p> ③ <p>我是父亲的第4个子元素</p> ④ <p>我是父亲的第5个子元素</p> </div> 所有的child和of-type都遵循此原则。 如果指定元素的所有兄弟元素都为同一类型(例如:ul内部子元素全部为li)，那么 child完全等于of-tyoe --> </body>
E:last-of-type：
<style> p:last-of-type{color:#f00;} </style> </head> <body> <div id="A"> <p>我是父亲的第1个子元素</p> <p>我是父亲的第2个子元素</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素，我是父元素倒数第一个p元素，所以我被选中</p> <h4>我是父亲的第5个子元素</h4> </div> <hr /> <div id="B"> <p>我是父亲的第1个子元素</p> <p>我是父亲的第2个子元素</p> <p>我是父亲的第3个子元素</p> <p>我是父亲的第4个子元素</p> <p>我是父亲的第5个子元素，我是父元素倒数第一个p元素，所以我被选中了</p> </div> </body>
E:nth-of-type(n)
<style> /*dt:nth-of-type(2){color:#f00;} 选中指定序号(正序)*/ /*dt:nth-of-type(odd){color:#f00;} 选中奇odd偶even类型(正序)*/ /*dt:nth-of-type(3n+1){color:#f00;} 选中自定义序列类型(正序)*/ </style> </head> <body> <dialog> <dt>吕秀才</dt> <dd>有什么比吃一坨shi更恶心的事情</dd> <dt>李大嘴</dt> <dd>吃两坨</dd> <dt>白展堂</dt> <dd>有什么比吃2坨shi更恶心的事情</dd> <dt>吕秀才</dt> <dd>塞牙了</dd> </dialog> </body>
E:nth-last-of-type(n)
<style> dt:nth-last-of-type(1){color:#f00;} /*选中指定序号(倒序)*/ /*dt:nth-last-of-type(even){color:#f00;} 选中奇odd偶even类型(倒序)*/ /*dt:nth-last-of-type(3n+1){color:#f00;} 选中自定义序列类型(倒序)*/ </style> </head> <body> <dialog> <dt>吕秀才</dt> <dd>有什么比吃一坨shi更恶心的事情</dd> <dt>李大嘴</dt> <dd>吃两坨</dd> <dt>白展堂</dt> <dd>有什么比吃2坨shi更恶心的事情</dd> <dt>吕秀才</dt> <dd>塞牙了</dd> </dialog> </body>
E:only-of-type：
<style> dt:only-of-type{color:#f00;font-size:30px} </style> </head> <body> <dialog> <dt>李明：</dt> <dd>不认真学习的孩纸都是耍流氓！</dd> </dialog> <!-- 当指定元素是其父元素的唯一一个指定类型元素的时候可以选中该子元素 该实例中:dt是 dt的父元素dialog中唯一的一个dt元素，所以可以选中,如果在dialog再加上一个dt就无法选中了 --> </body>
E:root
<style> html:root{background:green} </style> </head> <body> <p>捣乱用的</p> <!--在E:root跟选择器中，html页面的根永远都是html元素--> </body>
E:empty
<style> p:empty{height:25px;border:1px solid #ddd;background:#eee;} </style> </head> <body> <div class="test"> <p>我是父亲的第1个子元素p</p> <p></p> <!--空内容的被选中--> <p>我是父亲的第3个子元素p</p> </div> </body>
2、UI元素状态伪类选择器
|
选择符
|
版本
|
简介
|
|
E:checked
|
CSS3
|
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
|
|
E:enabled
|
CSS3
|
匹配用户界面上处于可用状态的元素E。
|
|
E:disabled
|
CSS3
|
匹配用户界面上处于禁用状态的元素E。
|
<style> input:disabled{background:yellow;color:green} input:enabled{background:#f90;color:red} input:checked+span{background:red} /*以上三个选择器都是针对表单做的提升修改*/ </style> </head> <body> <form method="post" action="#"> <fieldset> <legend>disabled和enabled</legend> <ul> <li> <label> <input type="text" name="id" value="99" disabled /><span>ID</span> </label> </li> <li> <label> <input type="text" name="user" value="" /> <!--input的默认状态具有 enabled属性--> <span>昵称</span> </label> </li> <li> <label> <input type="text" name="pwd" value="" enabled /> <span>密码</span> </label> </li> </ul> </fieldset> <fieldset> <legend>选中下面的项试试(单选按钮)</legend> <ul> <li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li> <li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li> <li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li> </ul> </fieldset> <fieldset> <legend>选中下面的项试试(多选按钮)</legend> <ul> <li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li> <li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li> <li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li> </ul> </fieldset> </form> </body>
三、属性选择器
|
选择符
|
版本
|
简介
|
|
E[att]
|
CSS2
|
选择具有att属性的E元素。
|
|
E[att="val"]
|
CSS2
|
选择具有att属性且属性值等于val的E元素。
|
|
E[att~="val"]
|
CSS2
|
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
|
|
E[att^="val"]
|
CSS3
|
选择具有att属性且属性值为以val开头的字符串的E元素。
|
|
E[att$="val"]
|
CSS3
|
选择具有att属性且属性值为以val结尾的字符串的E元素。
|
|
E[att*="val"]
|
CSS3
|
选择具有att属性且属性值为包含val的字符串的E元素。
|
|
E[att|="val"]
|
CSS2
|
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
|
<style> p[id]{background:red}/*选中有id属性的元素*/ p[id="green"]{background:green}/*选中id为green的元素*/ p[class~="yellow"]{background:yellow} p[class|="a"]{background:blue} a[href^="http://"]{color:red;text-decoration:none} a[href$="rar"]{color:pink;text-decoration:none;} a[href$="rar"]:after{content:url(images/rar.jpg)} a[href*="o"]{background:green} </style> </head> <body> <p id="abc">小红</p> <p id="green">小绿毛龟</p> <p class="fl yellow">我最喜欢黄色了</p> <p class="a-b">小兰兰</p> <hr /> <!--E[att^="值"] 选中以指定值开头的属性的元素--> <a href="http://www.baidu.com">百度一下，你就知道</a><br /> <a href="index.php">返回首页</a><br /> <!--E[att$="值"] 选中以指定值结尾的属性的元素--> <a href="down.rar">点此下载高清无码的高洛峰的AVI大片的种子</a> <!--E[att*="值"] 选中包含指定值字符的属性的元素--> </body>
四、伪对象选择器
|
选择符
|
版本
|
简介
|
|
E:first-letter/E::first-letter
|
CSS3
|
设置对象内的第一个字符的样式。
|
|
E:first-line/E::first-line
|
CSS3
|
设置对象内的第一行的样式。
|
|
E:before/E::before
|
CSS3
|
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
|
|
E:after/E::after
|
CSS3
|
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
|
|
E::selection
|
CSS3
|
设置对象被选择时的颜色。
|
<style> p::first-line{color:red} p::first-letter{color:green;font-size:25px}/*选中第一行的第一个字，优先级比first-line高*/ a::before{content:url(qvod.jpg)}/*选中超链接的前面*/ a::after{content:url(qvod.jpg)}/*选中超链接的后面*/ span::selection{background:#F0F} </style> </head> <body> <p> 春晓-孟浩然<br /> 春眠不觉晓，<br /> 处处蚊子咬，<br /> 打上敌敌畏，<br /> 不至死多少。<br /> </p> <hr /> <a href="高洛峰.avi">点此下载</a> <hr /> <span>听歌听的是腕，戴表戴的是链，王八看的是盖...</span> </body>
五、练习
1、设置如下效果
<style> a[href$="html"]::before{content:url(images/web.jpg)} a[href$="txt"]::before{content:url(images/txt.jpg)} a[href$="rar"]::before{content:url(images/rar.jpg)} a[href$="avi"]::before{content:url(images/qvod.jpg)} a[href$="doc"]::before{content:url(images/word.jpg)} a[href$="xls"]::before{content:url(images/excel.jpg)} a[href$="ppt"]::before{content:url(images/ppt.jpg)} </style> </head> <body> <p><a href="index.html">在线web浏览</a></p> <p><a href="html5.txt">TXT文档</a></p> <p><a href="html5.rar">压缩文档</a></p> <p><a href="html5.avi">高清无码的HTML5大片</a></p> <p><a href="html5.doc">HTML5word文档</a></p> <p><a href="html5.xls">HTML5excel文档</a></p> <p><a href="html5.ppt">HTML5幻灯片</a></p> </body>
2、设置表格实现如下效果：
<style> #test tr:nth-child(odd){background:red} #test tr:first-child{background:green} /*需要注意: 要先设定奇数行的颜色，再设定第一行的颜色 */ </style> </head> <body> <table width="500" border="1" id="test"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body>
<style> #test tr:nth-last-child(even){background:red} #test tr:first-child{background:green} </style> </head> <body> <table width="500" border="1" id="test"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body>
3、CSS3的transition属性
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;transition:1s;} /*-webkit-transition：兼容WebKit内核的， -moz-transition兼容老版本的火狐 -o-transition兼容老版本的欧朋浏览器 transition标准的 1s表示时间，及动画完成的时间 */ .box:hover{width:200px;height:200px;background:blue;} /* js中设置该属性的时候应该这样写： WebkitTransition MozTransition OTransition */ </style> </head> <body> <div class="box"></div> </body> </html>
