三、组合选择器
1、群组选择器
- 一次性控制多个选择器
- 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合
2、子代(后代)选择器
子代选择器用>连接,后代选择器用空格连接
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
相邻选择器用+连接,兄弟选择器用~连接
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
4、交集选择器
```css
div.d#dd { color: red; }
.d1.d2.d3 { color: red; } ```
四、组合选择器优先级
同目录结构下
- 子代与后代优先级相同,body > div == body div
- 相邻与兄弟优先级相同,div + span == div ~ span
- 最终样式采用逻辑后的样式值
不同目录结构下
- 1.根据选择器权值进行比较
- 2.权值为标签权重之和
- 3.权重: *:1 div:10 class:100 id:1000 !important:10000
- 4.权值比较时,关心的是值大小,不关心值的位置与具体选择器名
- 5.id永远比class大,class永远比标签大
- 注:控制的是同一目标,才具有可比性;
盒模型
一、盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content
v_hint：content = width x height
二、盒模型成员介绍
1、content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
- 内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
2、border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
v_hint：border满足整体设置语法，eg：border: 1px solid red;
3、padding
- padding成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
4、margin
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
规定起始,顺时针,不足找对面
三、边界圆角
border-radius
- border-radius成员
| 成员 | 解释 | | border-top-left-radius | 左上 方位 | | border-top-right-radius | 右上 方位 | | border-bottom-left-radius | 左下 方位 | | border-bottom-right-radius | 右下 方位 |
- 单方位设置
值类型：长度 \ 百分比
- 分向整体设置
不分方位:左上为第一个角,顺时针,不足找对角
区分方位:/前控制横向 /后控制纵向,横向又分1,2,3,4,纵向毅然
四、标签
1.超链接标签
./ 或省略代表当前文件所在的路径,可以访问与该文件同路径下的所有文件及文件夹
2.属性
title:鼠标悬浮的文本提示 target:blank,新开空白标签位来打开目标页面
3.其他应用场景
mailto | sms | tel
4.锚点
a与a href = "#锚点名" name = "锚点名"
img5.使用
src="地址" alt="资源加载失败文本提示" title="图片文本信息,鼠标悬浮展示"
6.list列表
伪类选择器
1、a标签四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态
- :visited：已访问状态
2、内容伪类
- :before：内容之前
- :after：内容之后
css :before, :after { content: "ctn"; }
3、索引伪类
- :nth-child(n)：位置优先，再匹配类型
- :nth-of-type(n)：类型优先，再匹配位置
v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始
4、取反伪类
- :not(selector)：对selector进行取反
盒模型布局
1、盒模型布局基本介绍
- 布局方位：margin-left、margin-right、margin-top、margin-bottom
- 影响自身布局：margin-left、margin-top
- 影响兄弟布局：margin-right、margin-bottom
- 正向 / 反向：正值 / 负值
2、margin布局坑位
- 很多语义标签具有默认margin
- 父子标签margin-top重叠取大者
- 兄弟标签margin-bottom、margin-top重叠取大者