css3 选择器

浏览数：24 / 时间：2015年06月09日

一、结构性伪类选择器 empty
　　　　:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
　　　　例如：p:empty { display: none;}?
二、结构性伪类选择器 target
　　　　:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
　　　　1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand
　　　　2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。
　　　　例如：
　　　　　　<h2><a href="#brand">Brand</a></h2>
　　　　　　<div class="menuSection" id="brand">content for Brand</div>
　　　　　　.menuSection{
　　　　　　　　display: none;
　　　　　　}
　　　　　　:target{/*这里的:target就是指id="brand"的div对象*/
　　　　　　　　display:block;
　　　　　　}
三、结构性伪类选择器 first-child
　　　　:first-child 选择器表示的是选择父元素的第一个子元素的元素E 是子元素，而不是后代元素。
　　　　例如：
　　　　　　<ol>
　　　　　　　　<li><a href="##">Link1</a></li>
　　　　　　　　<li><a href="##">Link2</a></li>
　　　　　　　　<li><a href="##">link3</a></li>
　　　　　　</ol>

　　　　　　ol > li:first-child{
　　　　　　　　color: red;
　　　　　　　　}
四、结构性伪类选择器 last-child
　　　　　　:last-child 匹配元素的最后一个子元素
　　　　　　例如：
　　　　　　　　ul > li:last-child {//删除列表中最后一个列表项的底部边框。
　　　　　　　　　　border-bottom: none;
　　　　　　　　　}
五、结构性伪类选择器 nth-child(n)
　　　　:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值从1开始
　　　　例如：
　　　　　　<ol>
　　　　　　　　<li>item1</li>
　　　　　　　　<li>item2</li>
　　　　　　　　<li>item3</li>
　　　　　　　　<li>item4</li>
　　　　　　　　<li>item5</li>
　　　　　　</ol>?
　　　　ol > li:nth-child(2n){//偶数行变黄色
　　　　　　　　background: orange;
　　　　　　}
六、结构性伪类选择器 nth-last-child(n)
　　　　:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，
　　　　只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，
　　　　从某父元素的最后一个子元素开始计算，来选择特定的元素。
七、first-of-type选择器
　　　　:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型, 其主要用来定位一个父元素下的某个类型的第一个子元素。
　　　　例如：.wrapper > p:first-of-type {/*改变第一个段落的背景为橙色*/
　　　　　　　　　　　　background: orange;
　　　　　　　　　　}
八、nth-of-type(n)选择器
　　　　:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
　　　　例如：.wrapper > p:nth-of-type(2n){/* 将容器“div.wrapper”中偶数段数的背景设置为橙色。 */
　　　　　　　　　　　　background: orange;
　　　　　　　　　　}
九、last-of-type选择器
　　　　:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
　　　　例如：.wrapper > p:last-of-type{/*将容器“div.wrapper”中最后一个段落元素背景设置为橙色*/
　　　　　　　　　　background: orange;
　　　　　　}
十、nth-last-of-type(n)选择器
　　　　　　:nth-last-of-type(n)选择器和“:nth-of-type(n) 选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
　　　　　　例如：.wrapper > p:nth-last-of-type(3){/*选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。*/
　　　　　　　　　　　　　　background: orange;
　　　　　　　　　　}
十一、only-child选择器
　　　　　　:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
　　　　　　例如：.post p:only-child {
　　　　　　　　　　　　background: orange;
　　　　　　　　}
十二、only-of-type选择器
　　　　　　:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。
　　　　　　　　例如：.wrapper > div:only-of-type {/*选择器来修改容器中仅有一个div元素的背景色为橙色。*/
　　　　　　　　　　　　　　　　background: orange;
　　　　　　　　　　　　}
十三、属性选择器
　　　　　　a[class^=column]{/*匹配<a href="##" class="columnNews">我的背景想变成红色</a>*/
　　　　　　　　　　　　　　background:red;
　　　　　　　　　　}
　　　　　　a[href$=doc]{/*匹配<a href="1.doc">我的背景想变成绿色</a>*/
　　　　　　　　　　　　　　background:green;
　　　　　　　　　　}
　　　　　　a[title*=box]{/*匹配<a href="##" title="box1">我的背景想变成蓝色</a>*/
　　　　　　　　　　　　　　background: blue;
　　　　　　　　　　}
十四、结构性伪类选择器—root
　　　　　　:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。
　　　　　　　　在HTML文档中，根元素始终是<html>。
　　　　　　例如：
　　　　　　　　:root {
　　　　　　　　　　background:orange;
　　　　　　　　}
十五、结构性伪类选择器—not
　　　　　　选择除某个元素之外的所有元素
　　　　　　例如
　　　　　　　　input:not([type="submit"]){/*匹配除了按钮以外的input元素*/
　　　　　　　　　　　　border:1px solid red;
　　　　　　　　　　　}