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

曹莓奶昔

已于 2022-04-05 15:34:15 修改

阅读量348

点赞数

分类专栏： CSS 文章标签： css3 css 前端 vscode

于 2022-03-31 15:57:43 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/123863546

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

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>

曹莓奶昔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增特性：选择器、盒子模型、其他属性

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属性且值
复制链接

扫一扫