1. CSS3现状

2. 新增选择器

2.1 属性选择

2.2 结构伪类选择

2.3 伪元素选择器（重点）

2.3.1使用场景

3. 盒子模型

4. css3的其他特性

4.1 css3滤镜filter

4.2 calc 函数

4.3 css过渡（重点）

1. CSS3现状

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于pc端
不断改进中
应用相对广泛

2. 新增选择器

2.1 属性选择

根据元素特定属性来选择元素，不用借助与类或者是ID选择器

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

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

2.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的倍数（5 10 15 ...）
n+5	从第五个开始（包含第五个）到最后
-n-5	前5个（包含第五）(倒数输出）...

E:nth-child(n)和E:nth-of-type(n)区别：
E:nth-child(n) 对父元素里面的所有孩子排序选择（序号固定），先找第几个孩子，在匹配E元素
E:nth-of-type(n)对父元素里面指定子元素进行排序选择，先匹配E，再根据E找第几个孩子

2.3 伪元素选择器（重点）

利用CSS创建新标签元素，而不需要HTML标签，简化HTML结构

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

注意：

before和after创建一个元素，属于行内元素
新创建的元素在文档数里面是找不到的，所以称为伪元素
语法：element::before {}
before和after必须有content属性
伪元素选择器和标签选择器权重为1

2.3.1使用场景

伪元素字体图标
仿土豆效果
伪元素清除浮动

3. 盒子模型

css3可以通过box-sizing来指定盒子类型，有两个值：conten-box、border-box，这样计算盒子的方式发生了变化。

可以分为两种情况：

box-sizing: content-box 盒子大小为width+padding+border（以前默认的）
box-sizing: border-box 盒子大小为width

如果盒子模型改为box-sizing: border-box，那么padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

4. css3的其他特性

4.1 css3滤镜filter

将模糊或者颜色偏移等图形效果应用于元素（类似马赛克原理）

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

4.2 calc 函数

calc（）函数在声明css属性值时执行一些计算

width: calc(100% - 80px);

括号可以使用+、-、*、/符号来进行计算

注意：符号前后要加空格

4.3 css过渡（重点）

过渡（transition）是css具有颠覆性的特征之一，不使用flash动画或者JavaScript的情况，发生元素变化

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

ie9版本以下的浏览器不支持，但是不会影响页面布局

我们经常和 :hover一起搭配使用

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

属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以，如果想要所有哦的属性都发生变化，写一个all就可以。

花费时间：单位是秒（必须写单位）比如0.5s。

运动曲线：默认是ease（可以省略）。

何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）。

如果想用多个属性，加个‘,’分隔开;多个属性用all

注意：给谁过渡就给谁加属性

练习（过渡条）：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>进度条</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;border-radius: 7px;transition: all .5s;}.bar_in:hover {width: 100%;}</style>
</head><body><div class="bar"><div class="bar_in"></div></div>
</body></html>

CSS3新增特性：选择器、盒子模型、其他属性相关推荐

CSS3新增-属性（长度颜色背景）选择器-盒子模型
属性(长度颜色背景)选择器-盒子模型 1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: ...
HTML5以及CSS3新增特性
HTML5以及CSS3新增特性 HTML5 1.语义化标签: 2.多媒体标签: 视频标签:<video> 语法格式如下: <video src="文件地址" co ...
【前端知识之CSS】CSS3新增特性
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍CSS3新增特性. 文章目录前言一.选择器二.新样式 1.边框 2.背景 3.文字 4.颜色三.transition过渡(一般和:hov ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
html5与css3新增特性精讲
目录前言 HTML5篇一,html5新增语义化标签二,html5中新增的多媒体标签 2.1 视频标签video 2.2 视频标签的属性 2.3 音频标签audio 2.4 音频标签的属性三,h ...
CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
CSS--背景样式---伪类选择器---高级选择器---盒子模型---浮动
文章目录背景样式背景颜色背景图片图片重复方式图片位置图片附着简写属性伪类选择器高级选择器后代选择器直接后代选择器并列选择器相邻兄弟选择器盒子模型边框内边距外边距外边 ...
CSS3新增的选择器有哪些？
CSS3新增的选择器有哪些?(逆站班学习论述) css3选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 1. p~ul选择前面有"< p >"元 ...
css样式大全（总结、心得、css3新特性、盒子居中模型等）
css.html.js是前端的三剑客学习好css,这能让前端页面'妆扮'成更加美丽! 行内元素(display:inline) span a bi em label input select te ...

CSS3新增特性：选择器、盒子模型、其他属性

1. CSS3现状

2. 新增选择器

2.1 属性选择

2.2 结构伪类选择

2.3 伪元素选择器（重点）

2.3.1使用场景

3. 盒子模型

4. css3的其他特性

4.1 css3滤镜filter

4.2 calc 函数

4.3 css过渡（重点）

CSS3新增特性：选择器、盒子模型、其他属性相关推荐

最新文章

热门文章