标签：链接 visit 不能 状态 cti 注意 last col ast
css3在原来的原则器基础上增加了很多类型的选择器，下面总结一下css3提供的选择器，当做一个复习。
一、基础选择器
1、* ：通配选择器，选择HTML文档中的所有元素。
2、#idValue :id选择器，选择id为idValue的元素。
3、.classValue :类选择器，选择类为classValue的元素
4、E: 标签选择器，选择所有E元素
5、E，#idValue,.classValue :群组表达式，选择所有的E元素和id为idValue的元素，类为classValue的元素。
二、层次结构选择器
1、E F ：后代选择器，选择以E为父元素，后代中的F元素，如下图:
1 <div> 2 <p> 3 <span>我被选中了</span> 4 </p> 5 </div> 6 7 div span{}选中的即为div里的span元素
2、E>F :子选择器，选择以E为父元素，子元素为F的元素，注意只能选择E的子元素F，E的孙子元素F是不能被选中的。如下图：
1 <div> 2 <span> 我是子元素</span> 3 <p> 4 <span>我是子元素的子元素</span> 5 </p> 6 </div> 7 div >span{}选中的是内容是我是子元素的span
3、E+F:相邻兄弟选择器，选择跟E在同一层级的F元素，如下图：
1 <div> 2 <p> 我是子元素</p> 3 </div> 4 <p>我是兄弟元素</p> 5 div +p选中的是内容为我是兄弟元素的p元素
4、E~F :通用选择器，选择排在E后面的所有兄弟元素，跟兄弟原则器不同的是它只选择后面的兄弟元素，前面的不选择，如下图：
1 <span>我是前面兄弟元素</span> 2 <div> 3 <p><span>我是子元素的子元素</span> </p> 4 <span>我是子元素</span> 5 </div> 6 <span>我是后面兄弟元素</span> 7 8 div ~span{}选中的是内容为我是后面兄弟元素的span元素
三、属性选择器
1、[attr]：选择有attr属性的所有元素
2、[attr=value]：选择有attr属性且属性的值为value的元素
2、[attr^=value]:选择有attr属性且属性值以attr开头的元素，如下图：
1 <div class="divFirst">class以div开头</div> 2 <div class="divSecond">class以div开头</div> 3 <div class="three">class不以div开头</div> 4 5 div[class^="div"]{ 6 color: red; 7 } 8 匹配到的是前两个div
3、[attr$=value]:选择有attr属性且属性的值以value为结尾。如下图：
1 <div class="div">class以v结尾</div> 2 <div class="div">class以v结尾</div> 3 <div class="three">class不以v结尾</div> 4 5 div[class$="div"]{ 6 color: red; 7 } 8 匹配到前两个div
4、[attr*=value]:选择有attr属性且属性值包含value的元素，如下图：
1 <div class="div"></div> 2 <div class="div"></div> 3 <div class="dthree"></div> 4 5 div[class*="d"]{} 选中div元素中class属性中包含d的元素，上面三个div都选中
5、[attr|=value]：选择有attr属性并且属性值以value开头的元素，其中value必须为一个完整的单词。
6、[attr~=value]：选择有attr属性并且属性值包含value的元素，其中的value必须是完整的单词。
四、UI状态伪类选择器
1、E:checked：匹配选中的表单元素，比如选中的单选框，复选框。
2、E:enabled：匹配启用的所有表单元素
3、E:disabled：匹配被禁用的表单元素
五、目标伪类选择器
1、E：target：选择被url指向的E元素，如图：
1 <div id="div1">111</div> 2 <div id="div2">222</div> 3 <a href="#div1">跳转到1</a> 4 5 div:target{ 6 color: red; 7 } 8 当点击超链接时，第一个div的字体颜色变红。
六、动态伪类选择器
1、E:link：匹配定义了超链接且未被访问过的元素
2、E:visited：匹配定义了超链接且超链接被访问过的元素
3、E:active：匹配被激活的元素
4、E:focus：匹配获得焦点的元素
5、E:hover：匹配鼠标放在上面的元素
七、否定伪类选择器
1、E:not(F):选择所有不满足F条件的E元素。
八、结构伪类选择器
1、E:first-child:匹配E元素的父元素的第一个子元素是E的E元素，如下图：
1 <div> 2 <p>11111</p> 3 <p>22222</p> 4 <p>33333</p> 5 <p>44444</p> 6 <p>555555</p> 7 </div> 8 pl：first-child匹配到的是第一个p元素，如果在第一个p元素前面加一个span元素，则不能匹配到任何元素。
2、E:last-chilid：匹配E元素的父元素的最后一个子元素是E的E元素，如图：
1 <div> 2 <p>11111</p> 3 <p>22222</p> 4 <p>33333</p> 5 <p>44444</p> 6 <p>555555</p> 7 </div> 8 p：lastt-child匹配到的是最后一个p元素，如果在最后一个p元素后面加一个span元素，则不能匹配到任何元素。
3、E:nth-child(n):匹配E的父元素的处在第n个位置的子元素，如果第n个子元素为E，则匹配成功，否则匹配失败。
4、E:nth-last-child：匹配E的父元素从后面数起的第n个子元素，如果第n个子元素为E，则匹配成功，否则匹配失败。
5、E:only-child：匹配E的父元素中只有一个子元素，且该子元素是E的E元素。
6、E:root：匹配元素E所在的文档的根元素。
7、E:nth-of-type(n):匹配元素E的父元素中的第n个E元素，与E:nth-chilid不同的是，计算n的时候，nth-chilid是把所有的子元素都算在里面，而nth-of-type只计算子元素为E的元素。
8、E:nth-of-last-type(n)：匹配元素E的父元素中从最后算起的第n个E元素
9、E:first-of-type:匹配元素E的父元素中的第一个子元素E。
10、E:last-of-child：匹配元素E的父元素中的最后一个子元素E.
11、E:only-of-type:匹配E的父元素中只有一个E子元素的E元素，与E:only-child不同的是，only-child中只有一个子元素，而only-of-type中可以有多个子元素，但子元素E只能有一个。
12、E:empty：选择没有任何子元素的E元素。
标签：链接 visit 不能 状态 cti 注意 last col ast
原文地址：http://www.cnblogs.com/qiaoyun/p/7519916.html
