CSS3学习（四）选择器详解

CSS3添加了一些新的选择器，如下：

1.属性选择器
css3 追加了三种属性选择器：

①[attr*=val]    //包含val中字符串被选择
②[attr^val]     //以val中字符串开头的被选择
③[attr$=val]    //以val中字符串作为结束的被选择

三者都是以通配符的形式来选择，举例：

[id*=div]{...}

这时候这些标签都被选中：

<div id="idiv"></div>
<div id="div1"></div>

2. 结构性伪类选择器
①first-line;first-letter
②before;after

举例：

p:first-line{...}               
//以下第一行文字被选中
<p>这是第一行<br/>这是第二行</p>

li:after{content:"追加";font-size:10px;}
//以下li标签的文字之后会有“追加”二字
<ul>
    <li>后面有追加</li>
</ul>

3. root、not、empty、targe选择器
① root选择器表示根，其实是整个html页面，例子

    :root{...} //整个页面使用，级别比body大

② not选择器，过滤掉不要改变的元素，例子

div *:not(h1){...}
    //以下h1不被选中
    <div>
        <h1>这个不选中</h1>
        <h2>这个选中</h2>
    </div>

③ empty 没有内容的元素被选中

:empty{...}
    //以下空单元格被选中
    <table border="1">
        <tr>
            <td>不选中</td>
            <td></td>
        </tr>
    </table>

④ target 被锚记/a标签点击选中的部分被选中
使用还是

empty:{...}

4.子元素选择器
①first-child、last-child、nth-child(n数字)、nth-last-child(odd奇数/even偶数) 选择器
举例：

li:first-child{...}
    //以下第一个li标签选中
    <ul>
        <li>这个选中</li>
        <li>这个不选中</li>
    </ul>

②nth-of-type 和 nth-of-last-type
指定某种元素类型的某些个被选中，剔除该元素底下的子元素被计算在内

③ only-child选择器
只有一个子元素时使用

另外：
当元素循环使用不同样式时，可以用nth-child（3n+1）等等参数来表示，这个就是三个一循环，3n+2、3n+3…

5. UI元素状态伪类选择器
hover、focus、active、checked、enabled、disabled选择器等等，使用方法类似a标签的伪类选择器，举例：

input[type="checkbox"]:checked{...}//复选框被选中时 变化样式
    * 注意：元素disabled属性的值 只能是 空 “” 或 disabled，而不是true/false

6. 通用兄弟元素选择器
是在同一个父类元素下的同级别元素被选中，举例：

div~p{...}
    //以下某些部分选中
    <div>
        <div>
            <p>不选中</p>
        </div>
        <p>选中</p>
        <p>选中</p>
    </div>