css学习之——选择器

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元素，如下图:

 <div>
        <p>
            <span>我被选中了</span>
        </p>
    </div>

div span{}选中的即为div里的span元素

2、E>F :子选择器，选择以E为父元素，子元素为F的元素，注意只能选择E的子元素F，E的孙子元素F是不能被选中的。如下图：

<div>
        <span> 我是子元素</span>
        <p>
            <span>我是子元素的子元素</span>
        </p>
    </div>
div >span{}选中的是内容是我是子元素的span

3、E+F:相邻兄弟选择器，选择跟E在同一层级的F元素，如下图：

<div>
        <p> 我是子元素</p>
    </div>
    <p>我是兄弟元素</p>
 div  +p选中的是内容为我是兄弟元素的p元素

4、E~F :通用选择器，选择排在E后面的所有兄弟元素，跟兄弟原则器不同的是它只选择后面的兄弟元素，前面的不选择，如下图：

 <span>我是前面兄弟元素</span>
    <div>
        <p><span>我是子元素的子元素</span> </p>
        <span>我是子元素</span>
    </div>
    <span>我是后面兄弟元素</span>

div ~span{}选中的是内容为我是后面兄弟元素的span元素

三、属性选择器

1、[attr]：选择有attr属性的所有元素

2、[attr=value]：选择有attr属性且属性的值为value的元素

2、[attr^=value]:选择有attr属性且属性值以attr开头的元素，如下图：

 <div class="divFirst">class以div开头</div>
 <div class="divSecond">class以div开头</div>
 <div class="three">class不以div开头</div>

div[class^="div"]{
            color: red;
        }
匹配到的是前两个div

3、[attr$=value]:选择有attr属性且属性的值以value为结尾。如下图：

<div class="div">class以v结尾</div>
<div class="div">class以v结尾</div>
<div class="three">class不以v结尾</div>

div[class$="div"]{
     color: red;
}
匹配到前两个div

4、[attr*=value]:选择有attr属性且属性值包含value的元素，如下图：

<div class="div"></div>
<div class="div"></div>
<div class="dthree"></div>

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元素，如图：

<div id="div1">111</div>
<div id="div2">222</div>
<a href="#div1">跳转到1</a>

div:target{
            color: red;
}
当点击超链接时，第一个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元素。