day46

CSS选择器

盒模型

标签a、img、list

伪类选择器

CSS选择器

一、基础选择器

1、通配选择器

- {
    border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签

2、标签选择器

div {
    background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span

3、类选择器

.red {
    color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配

4、id选择器

#div {
    text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配

二、基础选择器优先级

• 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
• 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
• 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

v_hint：id选择器必须保证单文档的唯一性

三、组合选择器

1、群组选择器

div, span, .red, #div {
    color: red;
}

• 一次性控制多个选择器
• 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

2、子代(后代)选择器

子代选择器用>连接
body > div {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}

• 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器

相邻选择器用+连接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
    color: red;
}

• 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

4、交集选择器

<div class="d" id="dd"></div>
div.d#dd {
    color: red;
}

<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}

四、组合选择器优先级

• 组合选择器优先级与权值相关，权值为权重和
• 权重对应关系

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000

• 选择器权值比较，只关心权重和，不更新选择器位置
• 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

五、属性选择器

• [attr]：匹配拥有attr属性的标签
• [attr=val]：匹配拥有attr属性，属性值为val的标签
• [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
• [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
• [attr*=val]：匹配拥有attr属性，属性值包含val的标签

v_hint：属性选择器权重等价于类选择器

v_test：掌握所有选择器，并熟知选择器优先级

盒模型

一、盒模型概念

• 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
• 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型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(风格)三部分组成
• border成员：border-left、border-right、border-top、border-bottom
• border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
• border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
• border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

v_hint：border满足整体设置语法，eg：border: 1px solid red;

3、padding

• padding成员：padding-left、padding-right、padding-top、padding-bottom
• padding整体设置

值得个数	方位
1	上下左右
2	上下 | 左右
3	上 | 左右 | 下
4	上 | 右 | 下 | 左

4、margin

• margin成员：margin-left、margin-right、margin-top、margin-bottom
• margin整体设置

赋值个数	方位
1	上下左右
2	上下 | 左右
3	上 | 左右 | 下
4	上 | 右 | 下 | 左

三、边界圆角

border-radius

• border-radius成员

成员	解释
border-top-left-radius	左上 方位
border-top-right-radius	右上 方位
border-bottom-left-radius	左下 方位
border-bottom-right-radius	右下 方位

• 单方位设置

赋值个数(值类型：长度 | 百分比)	解释
1	横纵
2	横 | 纵

• 按角整体设置

赋值个数(值类型：长度 | 百分比)	解释
1	左上 右上 左下 右下
2	左上 右下 | 右上 左下
3	左上 | 右上 左下 | 右下
4	左上 | 右上 | 右下 | 左下

• 分向整体设置

格式	解释
1 / 1	横向 | 纵向

四、其他相关属性

• max|min-width|height
• overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

• display

值	描述
inline	内联
block	块级
inline-block	内联块

标签

一、a标签

1、常用用法

<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>

2、相对路径

以当前文件作为参考，.代表当前路径，..代表上一级目录

3、常用属性

title -- 链接说明
target -- _self | _blank -- 目标位置

4、其他用法

• mailto：邮件给...
• tel：电话给...
• sms：信息给...

5、a标签reset操作

a {
    color: #333;
    text-decoration: none;
    outline: 0;
}

6、锚点

① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>

7、鼠标样式

{
    cursor: pointer | wait | move;
}

二、img标签

1、常用用法

<img src="https://image/icon.gif" />
<img src="./icon.gif" />

2、常用属性

alt -- 异常解释
title -- 图片解释

三、list列表

1、有序列表

<ol>
	<li></li>
	<li></li>
</ol>

2、无序列表

<ul>
	<li></li>
	<li></li>
</ul>

3、list的reset操作

ol, ul {
	margin: 0;
    padding: 0;
    list-style:none;
}

伪类选择器

1、a标签四大伪类

• :link：未访问状态
• :hover：悬浮状态
• :active：活跃状态
• :visited：已访问状态

2、内容伪类

• :before：内容之前
• :after：内容之后

: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重叠取大者