CSS高级选择器
2019-12-26 本文已影响0人
大前端世界
CSS高级选择器
一.伪类选择器
- 对于之前的类选择器的补充类再定义一个别名
举例
<div class='a a-1'>123</div>
其中a为类,a-1为伪类,伪类也是一种类,他们之间用宫格隔开
我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1
常用的两个伪类选择器
伪类选择器都是用:连接的
- 类名:nth-child(N):先确定位置，再筛选选择器
- 在同一结构下都是相同选择器时使用
- 类名:nth-of-type(N):先确定选择器，在匹配位置
- 在同一结构下不全是相同选择器时使用
举例
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<div>
<!--不同结构-->
<p class="p">第1个p</p>
<h1>1</h1>
<p class="p">第2个p</p>
<p class="p">第3个p</p>
<p class="p">第4个p</p>
<p class="p">第5个p</p>
</div>
<div>
<!--同结构-->
<p class="p">第1个p</p>
<p class="p">第2个p</p>
<p class="p">第3个p</p>
<p class="p">第4个p</p>
<p class="p">第5个p</p>
</div>
样式设置为
p:nth-child(2){
color:red
}
<!--他会先找p找到第2个,然后让他变色成红色,如果第二个不是p他就不起作用-->
p:nth-of-type(3){
color:red
}
<!--他会先找p然后往下找找到p计数才+1直到计数为2,他会让他变色成红色,如果第二个不是p他就不起作用-->
二.后代(子代)选择器
-
后代选择器:
CSS语法:上一级标签他所有的后代用宫格进行连接
-
子带选择器
CSS语法:父节点标签后他子节的用
>进行连接 -
注意点:连接的子代或者后代不能用他们的
标签名
举例说明:
<body>
<h2 id="h2">h2标签</h2>
<div>
<h2 id="h2">div下的h2</h2>
</div>
</body>
<!--我们要body下的所有h2类标签字体都是红色-->
div .h2{
color:red;
}
<!--我们只要body下的h2类标签字体都是红色-->
div>.h2{
color:red;
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
三.兄弟(相邻)选择器
- 兄弟选择器:
~进行连接,他是找到前者后他会接着找后者然后会一直遍历结束把所有的后者多找到 - 相邻选择器:
+进行连接,他是找到前者后,在前者后面的相邻的才会选中,如果没相邻他会接着找第二个前者 - 注意
- 选择器放置位置前与放置位置后,会有影响有点类似正则匹配先匹配到第一个然后匹配第二个
- 他所改变的是他们后者而不是两个都改变
- 兄弟(相邻)选择器首先他们要是兄弟节点
四.属性选择器
- 属性选择器优先级同类
- [属性名]查找所有有该属性的标签
- [属性名=属性值]精确查找
- [属性名^=值]以某某值开头
- [属性名$=值]以某某值结尾
- [属性名*=值]包含某某值(模糊查询)
五.交叉选择器
就是把上述的选择进行组合,包括之前讲的基础选择器
六.群组选择器
就是把上述的选择器用包括之前讲的基础选择器,隔开从而选择多个元素
七.选择器的优先级
- 权值:不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序
- 对于权值有些人对他级别的定义
- 标签 10
- 类(伪类)100
- id 1000
- !important 10000
