CSS组合选择器与盒模型精讲-优快云博客

三、组合选择器

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成员

单方位设置

值类型：长度 \ 百分比

分向整体设置

不分方位:左上为第一个角,顺时针,不足找对角

区分方位:/前控制横向 /后控制纵向,横向又分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重叠取大者

转载于:https://www.cnblogs.com/liangchengyang/p/9687333.html