前言
这篇文章我会根据自己所学知识对CSS添加样式的选择器使用进行简单阐述,因为是学习期间的知识,存在理解不完善,不够专业的情况,仅供参考。
CSS选择器类别
目前根据我所学知识,CSS选择器我目前所掌握的分为几大类:基础选择器,层次选择器,伪类选择器,动态伪类选择器等…因为知识储备量目前仅有这些,所以没提到的其他选择器,可以去网上查看
选择器思维导图
选择器的作用:选择页面上的某些元素应用CSS样式
注:选择器选中的是离大括号最近的元素,其他都是对这个元素的条件
接下来分类介绍一下选择器用法和作用
-
基本选择器
- 元素选择器
书写格式:元素名{声明块} - 通配符选择器
书写格式:*{声明块}
注:*匹配页面的多个元素 - 类选择器
书写格式:.类名{声明块}
注:类名匹配html标签中class的值 - ID选择器
书写格式:#ID名{声明块}
注:ID名匹配html标签中ID的值
一个页面ID值不可以重复
目前相比其他选择器权重最高 - 并集选择器
书写格式:元素名,类名,ID名{声明块}
注:三个名称可以任意选择搭配,中间英文逗号分隔 - 命名规范(适用于类选择器,ID选择器)
1、不要以数字开头
2、包含的字符:字母、数字、下划线、连字符
3、区分大小写,大小写敏感【大小写对应错误无法应用样式】
- 元素选择器
-
层次选择器
- 子集选择器
书写格式:父元素>子元素{声明块} - 后代选择器
格式:祖先元素+空格+后代元素{声明块} - 兄弟选择器(目前只能选中选择的元素后面的兄弟元素)
1、格式:选中的元素A+兄弟元素B{声明块}
功能:选中元素A的第一个兄弟元素(即相邻选择器)
2、格式:选中的元素A~兄弟元素名B{声明块}
功能:选中元素A后面的所有兄弟元素B,不需要紧挨着,中间可以穿插其他元素
- 子集选择器
-
伪类选择器
- 选中第n元素
- 格式:元素名:nth-child(n){声明块}
使用场景:所有兄弟元素的名字相同
若所有兄弟元素的名字不相同,可能会无法选中 - 格式:元素名:nth-of-type(n){声明块}
使用场景:所有兄弟元素的名字可以不相同
先筛选类型,在结果中选择第n个元素
- 格式:元素名:nth-child(n){声明块}
- 选中第一个元素
格式:元素名:first-child{声明块} - 选中最后一个元素
格式:元素名:last-child{声明块} - 选中奇数项元素
格式:元素名:nth-child(odd)/(2n+1) - 选中偶数项元素
格式:元素名:nth-child(even)/(2n) - 注:n的起始值为0
伪类选择器选中的是离大括号最近的元素,其他都是对这个元素的条件,如选中的元素名和html内元素无法对应上,不改变样式 - 伪类选择器扩展:
选中前m个元素的公式:元素名:nth-child(-n+m)
- 选中第n元素
-
否定伪类选择器
格式:元素名:not(:nth-child(n)){声明块} -
动态伪类选择器
格式:元素名:link/visited{声明块}
1、鼠标未访问link
2、鼠标已访问visited
3、鼠标悬停(移入)hover
4、鼠标点击active扩展:tab激活焦点框focus