CSS基础之常用选择器

CSS常用选择器

今天就介绍一些常见、常用的选择器，以及选择器的分类
一、基础选择器：
1.元素选择器
2.类选择器
3.ID选择器
4.通配符选择器（*）：选中文档中所有的元素
5.组合选择器、并集选择器（同时选中）（选择器之间用，隔开） **例：div,p,span{ color: red;}同时对div、p、span的元素内容进行颜色设置
注：比较特殊性时，组合选择器要分开计算

二、层次选择器
1.子级选择器
父元素>子元素{声明块}
2.后代选择器
父元素 子元素{声明块}
3.兄弟选择器（相邻兄弟：两个元素之间不能有任何标签）
兄弟元素A+兄弟元素B{声明块}（只能选中B）
4.通用选择器（不相邻兄弟）
兄弟元素A~兄弟元素B{声明块}（选中所有的兄弟元素B）

三、伪类选择器（伪造一个类选择器）
1.:nth-child(n) 选中第n个元素
适用场景：所有兄弟元素都是相同的标签名

:nth-child(2n)选中偶数项（even） :nth-child(2n+1)选中奇数项（odd） （n从0开始取值）
:nth-child(-n+3) 选中前三个元素

2.:nth-of-type(n) 选中第n个元素（只选择相同的标签名）
适用场景：兄弟元素的标签名可以不同

3.:last-child 选中最后一个元素
:first-child 选中第一个元素
:nth-last-child(n) 选中倒数第n个

4.否定伪类选择器
:not(:nth-child(n)) 除了第n个，其余都选择
例：p:not(:nth-child(3)){} 除了第三个，其余都选择
例：p:not(:nth-child(3)):not(:nth-child(4)){} 除了第三个第四个，其余都选择

5 动态伪类选择器
状态1： :link 未访问
状态2： :hover 悬停（鼠标移入）
状态3： :active 点击时
状态4： :visited 已访问
书写顺序1： :link/:visited/:hover/:active
书写顺序2： :visited/:link/:hover/:active
注：link/visited只适用于a标签

6.focus 获取焦点
当标签被激活时，即获取到焦点框

四、伪元素选择器（伪造一个元素）
::before 在当前元素之前添加内容（第一个子元素） h1::before{content: “内容”;}
::after 在当前元素之后添加内容 （最后一个子元素） h1::after{content: “内容”;}
伪元素与当前元素是父子级关系
::first-line 当前元素第一行 h1::first-line{color: gold;}
::first-letter 当前元素第一个字母（汉字） h1::first-letter{color: gold;}

五、属性选择器
1、书写格式：元素名[属性] 属性：属性名=”属性值”
p[class=“box”]{color:red;}
2、书写格式：元素名[name^=”部分属性值”] 表示以XXX开头的属性值（顺序）
p[name^=“f”]{color: blue;}
3、书写格式：元素名[name$=”部分属性值”]表示以XXX结束的属性值（倒序）p[name$=“n”]{color: blue;}

扫描二维码关注公众号，回复： 11661137 查看本文章

在CSS里面添加样式的时候，要选择适合的选择器，这样不仅可以减少代码量，优化代码结构，对于后期的维护也更方便。