元素框知识+CSS文件和媒体查询的语法及引用方式

选择器

1. 简单选择器

分为两大类：元素选择器、属性选择器

序号	选择器	描述	举例
1	元素选择器	根据元素标签名称进行匹配	`元素 {...}`
2	群组选择器	同时选择多个不同类型的元素	`元素1,元素2,元素3{...}`
3	通配选择器	选择全部元素,不区分类型	`* {...}`
4	属性选择器	根据元素属性进行匹配	`*[property=value]{...}`
5	类选择器	根据元素 class 属性进行匹配	`*.class {...}`
6	id 选择器	根据元素 id 属性进行匹配	`*#id {...}`

2. 上下文选择器

html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
每一个元素, 在文档中, 都有自己的位置,即上下文关系
所以, 完全可以根据元素的上下文关系,来获取到它们

2.1 一个元素的四种角色

序号	角色	描述
1	祖先元素	拥有子元素,孙元素等所有层级的后代元素
2	父级元素	仅拥有子元素层级的元素
3	后代元素	与其它层级元素一起拥有共同祖先元素
4	子元素	与其它同级元素一起拥有共同父级元素

2.2 四种上下文选择器

序号	选择器	操作符	描述	举例
1	后代选择器	`空格`	选择当前元素的所有后代元素	`div p`, `body *`
2	父子选择器	`>`	选择当前元素的所有子元素	`div > h2`
3	同级相邻选择器	`+`	选择拥有共同父级且相邻的元素	`li.red + li`
4	同级所有选择器	`~`	选择拥有共同父级的后续所有元素	`li.red ~ li`

3. 伪类选择器

学习之前,先分析上下文选择器的局限性,例如选择同一个父级下的第二个子元素,就没那么简单
而伪类就正好弥补了上下文选择器的短板, 所以伪类,大多数是基于文档中元素结构的
伪: 本意是假的,不存在的意思, 这里是特指, 不需要在元素上添加额外的属性来获取元素
类: 暗指伪类的级别, 仍然是属于”class”级别, 仍然属于属性选择器范畴,级别高于元素选择器

按使用场景分类：

场景	描述
结构伪类	根据子元素的位置特征进行选择
表单伪类	根据表单控件状态特征进行选择

3.1 结构伪类

3.1.1 不分组匹配

序号	选择器	描述	举例
1	`:first-child`	匹配第一个子元素	`div :first-child`
2	`:last-child`	匹配最后一个子元素	`div :last-child`
3	`:only-child`	选择元素的唯一子元素	`div :only-child`
4	`:nth-child(n)`	匹配任意位置的子元素	`div :nth-child(n)`
5	`:nth-last-child(n)`	匹配倒数任意位置的子元素	`div :nth-last-child(n)`

3.1.2 分组匹配

序号	选择器	描述	举例
1	`:first-of-type`	匹配按类型分组后的第一个子元素	`div :first-of-type`
2	`:last-of-type`	匹配按类型分组后的最后一个子元素	`div :last-of-type`
3	`:only-of-type`	匹配按类型分组后的唯一子元素	`div :only-of-type`
4	`:nth-of-type()`	匹配按类型分组后的任意位置的子元素	`div :nth-of-type(n)`
5	`:nth-last-of-type()`	匹配按类型分组后倒数任意位置的子元素	`div :nth-last-of-type(n)`

允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面
“-n”表示获取前面一组元素,正数表示从指定位置获取余下元素

3.3 其它伪类

序号	选择器	描述
1	`:active`	向被激活的元素添加样式
2	`:focus`	向拥有键盘输入焦点的元素添加样式
3	`:hover`	当鼠标悬浮在元素上方时，向元素添加样式
4	`:link`	向未被访问的链接添加样式
5	`:visited`	向已被访问的链接添加样式
5	`:root`	根元素,通常是`html`
5	`:empty`	选择没有任何子元素的元素(含文本节点)
5	`:not()`	排除与选择器参数匹配的元素

总结：

最常用：类、id、属性选择器，当使用属性类选择器时，可省略“*”，“*”表示选择文档中所有元素中符合该属性的元素。
使用类选择器使用时，可以对一个元素添加多个类名，类名之间用空格分开：class="clz1 clz2"，选择器为：.clz1.clz2
众多的元素组成HTML文档，从根元素<html>开始，其他都是<html> 的子元素，<html>为父元素。
子元素<head>和<body>再嵌套子元素，<html>就是祖先元素，嵌套的元素就是后代元素。
后代元素：包含子元素、间接子元素（孙元素）,后代选择器 选择了所有符合条件的子元素和间接子元素
把同级元素按先后顺序排列，排在前的是哥哥，排在后的是弟弟：同级相邻选择器 选择的就是最大的弟弟,这里选择的结果并不一定只有一个元素，当“+”前面的选择器是代表多个元素的时候，可能有多个结果；同级所有选择器 选择的就是所有的弟弟
6.伪类选择器-不分组匹配：匹配方式是按索引方式匹配当前元素（“：”前面的匹配结果集）的子元素；但“only-child不是：selector：only-child表示先匹配“selector”后的元素，再找这些元素是否是其父元素的唯一的子元素，是就能匹配上
伪类选择器-分组匹配:selector：nth-of-type(n)将匹配“selector”后的结果集（排除其他所有类型），从索引1开始计算后的“n”个元素就是匹配结果，

选择器

1. 简单选择器

2. 上下文选择器

2.1 一个元素的四种角色

2.2 四种上下文选择器

3. 伪类选择器

3.1 结构伪类

3.1.1 不分组匹配

3.1.2 分组匹配

3.3 其它伪类

相关文章