选择器
- 其主要作用在于
选择目标标签； - CSS选择器的类型：主要分为
基础选择器与复合选择器； - 基础选择器是由单个选择器组成的，可分为
标签选择器，类选择器，ID选择器与通配符选择器；
基础选择器
标签选择器
- 使用
Html标签名称作为选择器； - 可将某一类的标签全部选择出来，不能作差异化的设置；
这是一个段落标签1
这是一个段落标签2
这是一个段落标签3
说分手复合的时刻1
说分手复合的时刻2
说分手复合的时刻3
类选择器
- 可单独选取一个标签，作差异化设置；
- 在Html标签中
以class属性表示，在CSS中以一个点号+class属性表示； - 样式点定义，结构类调用；
-
类选择器-多类名：一个标签可以指定多个类名，多个类名之间用空格隔开； - 可以将标签的相同样式放到一个类里面，然后标签去调用公共的类，再然后调用自己独有的类；
- 你们
- 翻收到
- 的撒发
- 后宫番
王祖贤
王祖贤
王祖贤
ID选择器
- 以HTML标签的
id属性作为选择器，在CSS中id选择器以#来定义； - 样式通过#定义，结构通过id定义，只能被调用一次；
- id是
唯一的，不能出现重复；
刘德华
通配符选择器
- 在CSS中，通配符选择器使用
*来定义，它表示选取页面中的所有元素(标签)； - 通配符选择器
不需要调用，自动给所有元素设置样式；
刘德华
我的
- 还是我的
image.png
复合选择器
- 复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的；
- 复合选择器可更精准，更高效的选择目标标签；
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
- 复合选择器包括：
后代选择器，子选择器，并集选择器，相邻兄弟选择器，通用兄弟选择器，伪类选择器等等；
后代选择器
- 后代选择器又称包含选择器，可以选择父元素里面的子元素，其语法就是把外层标签写在前面，内部标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就称为外层标签的后代；
- 语法格式：
元素1 元素2 { color: red; } - 选取元素1中的所有元素2，设置样式；
- 元素1与元素2以空格隔开，元素1是父级，元素2是后代，元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；
Document
- ssssd
- ssssd
- ssssd
-
我是孙子
- 中国是多少
- 中国是多少
- 中国是多少
- 中国是多少
子选择器
- 只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素；
- 其语法格式如下：
元素1>元素2 { color: red; }； - 元素1与元素2之间用大于号隔开；
- 元素1是父级 元素2是子级，最终选择的是元素2；
- 元素2必须是亲儿子，不准是孙子；
Document
并集选择器
- 可以选择多组标签，同时为它们定义相同的样式；
- 其语法格式如下：
元素1,元素2 { color: red; }； - 元素1与元素2之间以逗号隔开；
- 同时设置元素1与元素2的样式；
Document
熊大
熊二
光头强
- 小猪佩奇
- 小猪佩奇1
- 小猪佩奇2
相邻兄弟选择器
- 相邻兄弟选择器：利用加号(+)，将两个选择器相连；
- 语法格式：
a+b { color: red; }，表示选择紧跟在a选择器的元素之后的第一个兄弟元素b，a与b是兄弟关系，有共同的父级元素，且b是a的第一个兄弟；
image.png
通用兄弟选择器
- 通用兄弟选择器：利用~，将两个选择器相连；
- 语法格式：
a~b { color: red; }，表示a之后的所有兄弟选择器b，都会被选中；
伪类选择器
- 伪类选择器：用于给某些选择器添加特殊效果，常见的有
链接(a)伪类选择器，foucus伪类选择器等等； -
链接(a标签)伪类选择器，主要有以下几种状态：-
a:link：选择所有未被访问的链接； -
a:visited：选择所有已被访问的链接； -
a:hover：选择鼠标指针位于其上的链接； -
a:active：选择活动链接(鼠标按下未弹起的链接)；
-
- 为了确保链接伪类能生效，请按照
link->visited->hover->active的顺序编写； - 链接a标签默认是有样式的，需要单独设置样式；
Document
西游记
-
foucus伪类选择器：用于选取获取焦点的表单元素，焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对于表格元素来说；
Document
image.png
CSS3新增的选择器
- 在CSS3中新增了
属性选择器，结构伪类选择器，伪元素选择器，IE9.0+才支持，存在兼容性问题，移动端支持优于PC端；
属性选择器
-
属性选择器：可以根据元素的特定属性来选择目标元素； - 属性选择器的权重为
0010，属性选择器的主要类型有如下：-
a[attr]：有属性attr的所有a标签； -
a[attr='value']：有属性attr且属性值为value的所有a标签； -
a[attr^='value']：有属性attr且属性值以value开头的所有a标签； -
a[attr$='value']：有属性attr且属性值以value结尾的所有a标签； -
a[attr*='value']：有属性attr且属性值包含value的所有a标签； -
a[attr~='value']：有属性attr且属性值包含value，value整体要以空格隔开的所有a标签； -
a[attr|='value']：有属性attr且属性值以value或者value-开头的所有a标签；
-
1
2
3
4
5
6
7
8
9
1
2
3
4
5
-
div[class] { background-color: red; }：有class属性的所有div标签，则会选中所有的div标签； -
div[class="test"] {background-color: red; }：有class属性且属性值为test的所有div标签，则会选中1，3，5 三个div标签； -
div[class^="best"] { background-color: red; }：有class属性且属性值以best开头的所有div标签，则会选中4，7，8，9 四个div标签； -
div[class$="btn"] { background-color: red; }：有class属性且属性值以btn结尾的所有div标签，则会选中2，4 两个div标签； -
a[lang*="zh-"] { background-color: red; }：有lang属性且属性值包含zh-的所有a标签，则会选中3，4，5 三个a标签； -
div[class~="test"] { background-color: red; }：有class属性且属性值为test且test要以空格隔开的所有div标签，则会选中1，3，5 ，7 四个div标签； -
div[class|="test"] { background-color: red; }：有class属性且属性值以test或test-开头的所有div标签，则会选中1，3，5，6 四个div标签；
伪类选择器
-
伪类选择器：主要根据文档结构来选择元素，常用于在父元素中选择子元素， - 伪类选择器的权重为
0010，常见类型有如下：
先将所有子元素进行排序，然后再选择
-
.father a:first-child：在父元素father中选择第一个子元素，若为a类型，则选中，否则未选中； -
.father :first-child：在父元素father中选择第一个子元素，无类型限制，直接选中； -
.father a:last-child：在父元素father中选择最后一个子元素，若为a类型，则选中，否则未选中； -
.father :last-child：在父元素father中选择最后一个子元素，无类型限制，直接选中； -
.father a:nth-child(n)：其中n可以是数字，关键字，表达式；- 当n是数字时，表示在父元素father中选择第n个子元素，若为a类型，则选中，否则未选中；
- 当n是关键字时，即
even(偶数)，odd(奇数)时，表示在父元素father中，选择奇偶数项的子元素，若为a类型，则选中，否则未选中； - 当n是表达式时，
注意n从0开始，例如当n=n时，表示在父元素father中，选择所有的a元素，当n=n+5时，表示在父元素father中，从第五个子元素开始，若为a类型，则选中，否则未选中，当n=-n+5时，表示在父元素father中，从前5个子元素中，若为a类型，则选中，否则未选中；
先将指定类型子元素进行排序，然后再选择
-
.father a:first-of-type：将父元素father中的所有a子元素排序，然后选中第一个a子元素； -
.father :first-of-type：将父元素father中的所有类型子元素排序，由于没有指定子元素类型，则会选择所有类型的 第一个子元素，则可能会选中多个子元素(不同类型)； -
.father a:last-of-type：将父元素father中的所有a子元素排序，然后选中最后一个a子元素； -
.father :last-of-type：将父元素father中的所有类型子元素排序，由于没有指定子元素类型，则会选择所有类型的 最后一个子元素，则可能会选中多个子元素(不同类型)； -
.father a:nth-of-type(n)：其中n可以是数字，关键字，表达式；- 当n是数字时，首先将父元素father中的所有a子元素排序，然后选择第n项的a元素；
- 当n是关键字时，即
even(偶数)，odd(奇数)时，首先将父元素father中的所有a子元素排序，然后选择奇偶数项的a元素； - 当n是表达式时，
注意n从0开始，例如当n=n+2时，首先将父元素father中的所有a子元素排序，然后选则从第2开始的所有a元素；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
-
.box span:first-child { background-color: pink; }：将box中所有子元素进行排序，然后选择第一个子元素，若为span类型，则选中，所以没有元素被选中； -
.box :first-child { background-color: pink; }：将box中所有子元素进行排序，然后选择第一个子元素，没有指定类型，则直接选中，所以1被选中； -
.box span:last-child { background-color: pink; }：将box中所有子元素进行排序，然后选择最后一个子元素，若为span类型，则选中，所以20被选中； -
.box :last-child { background-color: pink; }：将box中所有子元素进行排序，然后选择最后一个子元素，没有指定类型，则直接选中，所以20被选中； -
.box div:nth-child(5) { background-color: pink; }：将box中所有子元素进行排序，然后选择第5个子元素，若为div类型，则选中，所以5被选中； -
.box :nth-child(5) { background-color: pink; }：将box中所有子元素进行排序，然后选择第5个子元素，没有指定类型，则直接选中，所以5被选中； -
.box div:nth-child(odd) { background-color: pink; }：将box中所有子元素进行排序，然后选择奇数项子元素，若为div类型，则选中，所以1,3,5,7,9,11,13,15,17,19被选中； -
.box :nth-child(even) { background-color: pink; }：将box中所有子元素进行排序，然后选择偶数项子元素，没有指定类型，则直接选中，所以2,3,4,6,8,10,12,14,16,18,20被选中； -
.box div:nth-child(n+3) { background-color: pink; }：将box中所有子元素进行排序，然后从第3个子元素开始往后选择，若为div类型，则选中，所以3,5,7,9,11,13,15,17,19被选中； -
.box :nth-child(n+3) { background-color: pink; }：将box中所有子元素进行排序，然后从第3个子元素开始往后选择，没有指定类型，则直接选中，所以3~20都被选中； -
.box span:first-of-type { background-color: pink; }：将box中所有span子元素进行排序，然后选择第一个span元素，则2被选中； -
.box :first-of-type { background-color: pink; }：将box中所有类型子元素分别进行排序，然后选择所有类型的第一个元素，没有指定类型，则直接选中span类型和div类型的第一个元素，则1,2被选中； -
.box div:last-of-type { background-color: pink; }：将box中所有div子元素进行排序，然后选择最后一个div元素，则19被选中； -
.box :last-of-type { background-color: pink; }：将box中所有类型子元素分别进行排序，然后选择所有类型的最后一个元素，没有指定类型，则直接选中span类型和div类型的最后一个元素，则19,20被选中； -
.box div:nth-of-type(5) { background-color: pink; }：将box中所有div子元素进行排序，然后选择第5个div元素，则9被选中； -
.box :nth-of-type(5) { background-color: pink; }：将box中所有类型子元素分别进行排序，然后选择所有类型的第5个元素，没有指定类型，则直接选中span类型和div类型的第5个元素，则9,10被中； -
.box div:nth-of-type(odd) { background-color: pink; }：将box中所有div子元素进行排序，然后选择奇数项的div元素，则1,5,9,13,17被选中； -
.box :nth-of-type(even) { background-color: pink; }：将box中所有类型子元素分别进行排序，然后选择所有类型的偶数项元素，则3,4,7,8,11,12,15,16,19,20被选中； -
.box div:nth-of-type(n+5) { background-color: pink; }：将box中所有div子元素进行排序，然后从第5项开始往后选择div元素，则9,11,13,15,17,19被选中； -
.box :nth-of-type(n+5) { background-color: pink; }：将box中所有类型子元素分别进行排序，然后分别从第5项开始往后选择div元素和span元素，则9～20都被选中；
伪元素选择器
-
伪元素选择器：可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构；
image.png
- before与after创建一个元素，是属于行内元素，新创建的这个元素
在文档中是找不到的，所以我们称之为伪元素； - 语法格式：
element::before {}； - before与after必须有
content属性； - 伪元素选择器与标签选择器权重相同，
权重为0001； - before在
父元素内容的前面创建元素，after在父元素内容的后面创建元素；
是
image.png
伪元素选择器的使用场景
- 第一种：
伪元素字体图标；
- 第二种：
遮罩效果的实现；
![]()
- 第三种：
伪元素清除浮动；