首页 学习

# CSS3 新特性

# CSS3 的现状

  • 新增的 CSS3 特性有兼容性问题，IE9 + 才支持
  • 移动端支持优于 PC 端
  • 不断改进中
  • 应用相对广泛
  • 现阶段主要学习 : 新增选择器和盒子模型以及其他特性

# 新增选择器

CSS3 新增了选择器，可以更加便捷，更加自由的选择目标元素

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器

** 注意 : ** 类选择器，属性选择器，伪类选择器，权重为 10

# 属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者 id 选择器

选择符简介
E[att]选择具有 att 属性的 E 元素
E[att="val"]选择具有 att 属性且属性值等于 val 的 E 元素
E[att^="val"]匹配具有 att 属性且值以 val 开头的 E 元素
E[att$="val"]匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"]匹配具有 att 属性且值中含有 val 的 E 元素

# 结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素

选择符简介
E:first-child匹配父元素中的第一个子元素 E
E:last-child匹配父元素中的最后一个 E 元素
E:nth-child(n)匹配父元素中的第 n 个子元素 E
E:first-of-type指定类型 E 的第一个
E:last-of-type指定类型 E 的最后一个
E:nth-of-type(n)指定类型 E 的第 n 个
  • n 可以是数字，关键字和公式
  • n 如果是数字，就是选择第 n 个子元素，里面数字从 1 开始
  • n 可以是关键字 : even 偶数，odd 奇数
公式取值
2n偶数
2n+1奇数
5n5 10 15 ...
n + 5从第五个开始到最后
-n + 5前五个 (包含第五个) ...

nt-child 与 nth-of-type 区别

  1. nth-child 对父元素里面所有孩子排序选择 (序号是固定的) 先找到第 n 个孩子，然后看看是否和 E 匹配
  2. == ntf-of-type 对父元素里面指定子元素进行排序选择，先去匹配 E, 然后再根据 E 找到第 n 个孩子

# 伪元素选择器 (重点)

为元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

** 注意 : **

  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素再文档树中是找不到的，所以我们称为伪元素
  • 语法 : element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为 1

# CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：即可指定为 content-box , border-box , 这样我们计算盒子大小的方式就发生了改变

可以分成两种情况 :

  1. box-sizing : content-box 盒子大小为 width + padding + border
  2. box-sizing : border-box 盒子大小为 width

如果盒子模型我们改为 box-sizing : border-box, 那 padding 和 border 就不会撑大盒子了 (前提 padding 和 border 不会超过 width 宽度)

# CSS3 其他特性

  1. 图片变模糊
  2. 计算盒子宽度 width: calc 函数

# CSS3 滤镜 filter :

filter CSS 属性将模糊或颜色便宜等图形效果应用于元素

语法 :

1
filter: 函数(); 例如 : filter: blur(5px); blur模糊处理 数值越大越模糊

# CSS3 calc 函数 :

calc () 此 CSS 函数可以在声明 CSS 属性值是执行一些计算

1
2
3
4
5
6
7
8
9
10
11
.father {
    width: 300px;
    height: 300px;
    background-color: pink;
}

.son {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    background-color: red;
}