CSS3的新特性

最新推荐文章于 2022-07-16 11:43:26 发布

Continue丶

最新推荐文章于 2022-07-16 11:43:26 发布

阅读量107

点赞数 1

分类专栏： CSS3

本文链接：https://blog.csdn.net/qq_43522998/article/details/114659885

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3的现状

新增的CSS特性有兼容性问题。IE9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛

本篇主要讲：新增选择器和盒子模型以及其他特性（过渡、动画、转换等）。
1.CSS3 新增选择器
 2.CSS3 盒子模型
 3.CSS3 其他特性
 4.浏览器私有前缀

1.CSS3 新增选择器

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

属性选择器
结构伪类选择器
伪元素选择器

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

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 元素

如：

<body>
    <p class="1">1</p>
    <p class="2">2</p>
    <p id="id3">3</p>
    <p id="_4id">4</p>
    <p id="theidname5">5</p>
</body>

<style>

        p[class] {
            background-color: red;
        }

        p[class="2"] {
            background-color: pink;
        }

        p[id^="id"] {
            background-color: chartreuse;
        }

        p[id$="id"] {
            background-color: blue;
        }

        p[id*="idname"] {
            background-color: coral;
        }
    </style>

在这里插入图片描述

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个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子

如：

<body>
    <div class="father">
        <p>1</p>
        <p>2</p>      
    </div>
</body>

 .father p:nth-child(1) {
            background-color: blue;
        }

此时由于扫描到的第一个子标签是p，发现匹配，所以将第一个p背景设置为blue
在这里插入图片描述
而当我们在p标签前面再加一个其他标签，如下：

<body>
    <div class="father">
        <h5>0</h5>
        <p>1</p>
        <p>2</p>
    </div>
</body>

.father p:nth-child(1) {
            background-color: blue;
        }

此时由于新添h5标签且排在第一个位置，所以扫描到的一个子标签为h5，发现与p不匹配，则无法生效
在这里插入图片描述
接下来换做nth-of-type试试

<body>
    <div class="father">
        <h5>0</h5>
        <p>1</p>
        <p>2</p>
    </div>
</body>

   .father p:nth-of-type(1) {
            background-color: pink;
        }

发现生效了，因为nth-of-type是指定子元素排序对子元素后生效，其他元素无影响
在这里插入图片描述

3.伪元素选择器

作用：伪元素选择器可以帮助我们利用CSS创建新的标签元素，而不需要HTML标签，从而简化HTML结构
例如清除浮动中就利用了伪元素选择器，有效且简化了HTML结构

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

注意：

before和after创建一个元素，但是是属于行内元素
新创建的这个元素在文档中是找不到的，所以问我们称为伪元素
语法： E::before{}
必须要写content属性，就算为空也要写，content:"";
伪元素选择器和标签选择器一样，权重为1

2.CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒子模型，有两个值：

值	计算方式
content-box	width + padding + border (默认方式)
border-box	width

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

3.CSS3 其他特性

CSS3 滤镜 filter:
将模糊或颜色偏移等图形效果应用与元素
模糊处理：例如fliter:blur(5px)，值越大越模糊

CSS3 calc函数：
此函数让你在声明CSS属性值时执行一些计算。
如：width：calc（100%-80px）
作用就是让这个元素的宽度width值始终小于其父元素宽度80px
括号里可以 + - * /

CSS3 过渡：
过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
经常和：hover 一起使用
语法：
transition：要过渡的属性 花费时间 运动曲线 何时开始;
1. 属性:想要变化的CSS属性，高度（height）、宽度（width）、背景颜色等都可以，如果想要所有属性，写一个all即可
2.花费时间：单位秒，必须写单位
3.运动曲线：默认ease（逐渐慢下来的曲线），还有linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）
4.何时开始：单位秒，可以设置延迟触发时间，默认0秒
最后两项可以省略不写

CSS3 动画:
动画（animation）是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
详情请查看：https://blog.csdn.net/qq_43522998/article/details/114920645

CSS3 2D转换:
在2D环境可以实现元素的位移、旋转、缩放等效果，可以理解为简单的变形。
详情请查看：https://blog.csdn.net/qq_43522998/article/details/114904093

CSS3 3D转换:
在3D环境可以实现元素的位移、旋转等效果。
详情请查看：https://blog.csdn.net/qq_43522998/article/details/114947930

4.浏览器私有前缀

-moz- ：代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit- ：代表safari、chrome私有属性
-o-：代表Opera私有属性

提倡写法：

-moz-border-radius：10px;
-webkit--border-radius：10px;
-o-border-radius：10px;
border-radius：10px;

Continue丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的新特性

CSS3的新特性CSS3的现状新增的CSS特性有兼容性问题。IE9+才支持移动端支持优于PC端不断改进中应用相对广泛本篇主要讲：新增选择器和盒子模型以及其他特性。1.CSS3 新增选择器2.CSS3 盒子模型3.CSS3 其他特性1.CSS3 新增选择器CSS3 给我们新增了选择器，可以更加便捷，自由地选择目标元素属性选择器结构伪类选择器伪元素选择器注意：类选择器、属性选择器、伪类选择器，权重为101.属性选择器属性选择器可以根据元素特定属性来选择元素，这样可
复制链接

扫一扫