CSS选择器归纳
一、CSS新增选择器:
1、E[att ^ = "val"]匹配具有att属性,并以值val开头。
示例:
<style>
div[class^="a"]{
color:blue;
}
</style>
<div>
<div class="a1">测试数据a1</div>
<div class="a2">测试数据a2</div>
<div class="b2">测试数据b2</div>
<div class="b1">测试数据b1</div>
<div class="c1">测试数据c1</div>
<div class="c2">测试数据c2</div>
<div class="c3">测试数据c3</div>
</div>
2、E[att $ = "val"]匹配具有att属性,并以值val结尾。
示例:
<style>
div[class$="3"]{
color:blue;
}
</style>
<div>
<div class="a1">测试数据a1</div>
<div class="a2">测试数据a2</div>
<div class="b2">测试数据b2</div>
<div class="b1">测试数据b1</div>
<div class="c1">测试数据c1</div>
<div class="c2">测试数据c2</div>
<div class="c3">测试数据c3</div>
</div>
<style>
div[class$="3"]{
color:blue;
}
</style>
<div>
<div class="a1">测试数据a1</div>
<div class="a2">测试数据a2</div>
<div class="b2">测试数据b2</div>
<div class="b1">测试数据b1</div>
<div class="c1">测试数据c1</div>
<div class="c2">测试数据c2</div>
<div class="c3">测试数据c3</div>
</div>
3、E[att * = "val"]匹配具有att属性,包含val。
4、E[att = "val"]匹配具有att属性,等于val。
二、结构性伪类
1、E:nth-child(n)匹配在父元素中第N个子元素E
示例:
p:nth-child(2){
color: red;
}
<div>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
</div>
2、E:nth-last-child(n)匹配在父元素中倒数第N个子元素E
3、E:nth-of-type(n)匹配在同类型中第N个同级元素E
4、E:nth-last-of-type(n)匹配在同类型中倒数第N个同级元素E
5、E:last-child匹配在父元素中最后一个元素E
6、E:first-of-type匹配在父元素中第一个元素E
7、E:only-child匹配在父元素中唯一子元素E
8、E:only-of-type匹配在同类型中唯一兄弟元素E
9、E:empty匹配没有任何子元素的元素E
三、元素状态选择器
1、E:checked(被选中)当复先框被选中时
示例:input:checked + span::after{
content: "测试";
display: block;
width: 100px;
height: 30px;
color:blue;
background-color: red;
}
<div style="height: 400px;width: 600px;border:1px solid blue">
<input type="checkbox"/>
<span>欢迎!</span>
</div>
![]()
2、E:enabled(可用)
3、E:disabled(不可用)
4、E::selection(选中)当文本被选中时
示例:span::selection{
color: red;
background-color: blue;
}
<span>测试数据测试数据测试数据测试数据测试数据测试数据</span>;
示例:input:checked + span::after{
content: "测试";
display: block;
width: 100px;
height: 30px;
color:blue;
background-color: red;
}
<div style="height: 400px;width: 600px;border:1px solid blue">
<input type="checkbox"/>
<span>欢迎!</span>
</div>
2、E:enabled(可用)
3、E:disabled(不可用)
4、E::selection(选中)当文本被选中时
示例:span::selection{
color: red;
background-color: blue;
}
<span>测试数据测试数据测试数据测试数据测试数据测试数据</span>;
四、过滤选择器 E:not(s) 过滤S,否定伪类选择器
五、目标伪类选择器 E:target 通过跳转(可用id/name)跳转改变
六、相邻选择器 E+E{} 第1个不改变,相邻后面才改变
七、兄弟选择器 E~E{...}第1个不改变,后面全改变
示例:p~p{
color: red;
}
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
五、目标伪类选择器 E:target 通过跳转(可用id/name)跳转改变
六、相邻选择器 E+E{} 第1个不改变,相邻后面才改变
七、兄弟选择器 E~E{...}第1个不改变,后面全改变
示例:p~p{
color: red;
}
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>