CSS3 的新特性

2023-05-24 13:52 由柚時一念发表于 #前端开发

1. CSS3 新增选择器

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

1.1 属性选择器

属性选择品可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者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元素。

注意：类选择器、厲性选择器、伪类选择器，权重为 10。

1.2 结构伪类选择器

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

选择符	简介
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个。

nth-child （n）选择某个父元素的一个或多个特定的子元素。
n可以是数字，关键字和公式。
n如果是数字，就是选择第n 个子元素，里面数字从1开始…。
n可以是关键字：even偶数，odd 奇数。
n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）。

公式	取值
2n	偶数。
2n+1	奇数。
5n	5 10 15...。
n+5	从第5个开始（包含第五个）到最后。
-n+5	前5个（包含第5个）。

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

1.3 伪元素选择器

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

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

注意：

（1） before 和after 创建一个元素，但是属于行内元素。

（2）新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
语法：

element::before {}

before 和after必须有 content 属性。
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。
伪元泰选择器和标签选择器一样，权重为 1。

伪元素选择器使用场景：伪元素清除浮动

升级

优化

.clearfix:after {
content: " ";伪元素必须写的属性
display: block;插入的元素必须是块级
height: 0;不要看见这个元表
clear: both;核心代码清除浮动
visibility: hidden;不要看见这个元素

}

.clearfix:before, .clearfix:after {
content: " ";
display: table;转换为块级元素并且一行显示

}
.clearfix:after {
clear: both;

}

2. CSS3盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为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宽度）。

2.1 CSS3滤镜filter

filter Css属性将模糊或颜色偏移等图形效果应用于元素。
filter:函数(）例如：filter:blur(5px); blur模糊处理数值越大越模糊。

2.2 CSS3calc 函数

calc（此CSS函数让你在声明CSS属性值时执行一些计算）。
width: calc(100% - 80px); （运算符号前面必须有空格，并注意包含单位）。

括号里面可以使用＋-*/ 来进行计算。

2.3 CSS3 过渡

过渡 (transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或javaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态。

transition:要过渡的属性花费时间运动曲线何时开始；

1.属性：想要变化的 css 属性，完度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
2. 花费时间：单位是秒（必须写单位）比如0.5s。
3.运动曲线：默认是ease（可以省路）。
4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）。

口诀：谁做过渡给谁加。

热门相关：倾心之恋：总裁的妻子法医王妃不好当！战神修仙界最后的单纯横行霸道