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>