CSS3的新特性

最新推荐文章于 2024-03-13 08:00:00 发布
最新推荐文章于 2024-03-13 08:00:00 发布
阅读量577 收藏 2
点赞数
分类专栏： 笔记 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45139556/article/details/121056420
版权

CSS3的新特性

1.CSS3的现状

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

2.CSS3新增选择器

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

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

2.1属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类选择器或者id选择器
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3新增属性选择器</title>
    <style>
        /* 属性选择器 */
        /* 必须是input标签，同时必须具有value属性 */
        /*input[value] {
            color: pink;
        } */

        /*只选择type属性值为text的input表单元素*/
        input[type=text] {
            color: aqua;
        }

        /* 选择首先是div，然后具有class属性，并且属性值必须是incon开头的这些元素 */
        div[class^=incon] {
            color: skyblue;
        }
        /* 选择首先是section，然后是具有class属性，且属性值必须是以data结尾的这些元素 */
        section[class$=data] {
            color: burlywood;
        }
        /* 选择首先是p，然后是具有class属性，且属性值里有xt的元素 */
        p[class*=xt] {
            color: crimson;
        }
    </style>
</head>
<body>
    <!-- 1.利用属性选择器可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名"> -->
    <!-- <input type="text"> -->

    <!-- 2.属性选择器还可以选择属性=值的某些元素 -->
    <input type="text" name="" id="" >
    <input type="password" name="" id="">

    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="incon1">小图标1</div>
    <div class="incon2">小图标2</div>
    <div class="incon3">小图标3</div>
    <div class="incon4">小图标4</div>
    <div>我是打酱油的</div>

    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">我是谁</section>

    <!-- 5.属性选择器可以选择属性值里含有值的某些元素 -->
    <p class="text1">00001</p>
    <p class="text2">00002</p>
    <p class="text3">00003</p>
    <p class="dasdxtbbb">ddddd</p>
</body>
</html>

在这里插入图片描述

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

2.2结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
在这里插入图片描述

nth-child(n) 选择某个父元素的一个或多个特定子元素

  • n可以是数字，关键字和公式
  • n如果是数字，就是选择第n个子元素，里面数字从1开始
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3新增结构伪类选择器</title>
    <style>
        /* 选择ul里面的第一个li */
        ul li:first-child {
            background-color: red;
        }
        /* 选择ul里面的最后一个li */
        ul li:last-child {
            background-color: blue;
        }
        /* 选择ul里面的第五个li */
        ul li:nth-child(3) {
            background-color: darkblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>
</html>

在这里插入图片描述

  • n可以是关键字，even偶数，odd奇数
  • n可以是公式，常见的公式如下所示，（若公式是n，则会从0开始计算，但是第零个元素或者超出了元素个数的会被忽略）
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3新增结构伪类选择器-nth-child</title>
    <style>
        /* 把所有偶数的li选出来 */
        ul li:nth-child(odd) {
            background-color: greenyellow;
        }        
        /* 把所有奇数的li选出来 */
        ul li:nth-child(even) {
            background-color: skyblue;
        }
        /* nth-child(n),n从零开始，每次加一，括号里面的字母必须是n */
        /* 选择ol里面所有的偶数li */
        ol li:nth-child(2n) {
            background-color: #4fa;
        }
        /* 选择ol里面所有的奇数li */
        ol li:nth-child(2n+1) {
            background-color: #cfc;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
    </ol>
</body>
</html>

在这里插入图片描述

区别

  1. nth-child对父元素里面所有子标签排序，先找到第n个子标签，再看是否与前面指定的标签相对应
  2. nth-of-type对父元素里指定子元素进行排序，先匹配标签，再找第几个

小节

  • 结构伪类选择器一般用于选择父盒子里的第几个子元素
  • nth-child对父元素里面所有子标签排序，先找到第n个子标签，再看是否与前面指定的标签相对应==
  • nth-of-type对父元素里指定子元素进行排序，先匹配标签，再找第几个
  • 关于nth-child(n)我们要知道n从0开始计算
  • 类选择、属性选择器、伪类选择器权重为10

2.3伪元素选择器（重点）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
在这里插入图片描述
注意：

  • before和after创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以叫做伪元素
  • 语法：element::before{}
  • before和after必须有content属性
  • before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪类选择器和标签选择器一样，权重为1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div::before {
            content:'wo';
            /* 行内元素直接设置宽高是无效的 */
            width: 50px;
            height: 50px;
            background-color: blue;
        }

        div::after {
            /* 必须写content */
            content: '我';
            /* 转换为行内块元素 */
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>
</html>

在这里插入图片描述

3.CSS3盒子模型

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

  1. box-sizing: content-box; 盒子大小为width+padding+border（以前默认的方式）
  2. box-sizing: border-box; 盒子大小为width，此时padding和border不会撑大盒子

对比如下所示

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            box-sizing: content-box;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        小猪
    </div>
    <p>
        小猪
    </p>
</body>
</html>

在这里插入图片描述

4.CSS3的其他特性（了解）

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

4.1CSS3滤镜filter

filter CSS属性将模糊或者颜色偏移等图形效果应用于元素
例如：filter: blur(5px);(注意有单位)
在这里插入图片描述

4.2CSS3 calc函数

calc()此CSS函数让你在声明CSS属性值时，执行一些计算
width: calc(100% - 80px);括号里可以是+,-,*,/等运算

注意：计算符号和数字之间要有空格

5.CSS3 过渡 （重点）

过渡（transition）是CSS3中具有颠覆性的特性之一，让可以在不使用flash动画或者JS的情况下，当元素从一种样式变成另一种样式时，为元素添加过渡动画
过渡动画：从一个状态逐渐的过渡到另外一个状态
经常和：hover搭配使用
transition: 要过渡的属性 花费时间 运动曲线 开始时间;（后面两个可以省略）
谁做过渡给谁加这句代码
在这里插入图片描述
在这里插入图片描述
例子如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3过渡</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transition: 变化的属性 花费的时间 运动曲线 何时开始; */
            /* transition: width 3s ease 1s; */

            /* 写多个属性时，利用逗号分隔 */
            /* transition: width 3s ease 1s , height 3s ease 1s;  */
        
            /* 如果想要多个属性都变化，属性写all即可 */
            transition: all 3s;
        }
        div:hover {
            width: 400px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
一只小白657
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day7小结
KanaseKanon的博客
09-24 790
1、CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2、CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D<->3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）盒模型 15）Web字体 16）媒体查询 3、CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。 1）主流浏览器内
css3新特性总览
low666的博客
04-07 729
css3新特性 css3选择器 选择器 示例 示例说明 .class .intro 选择所有class="intro"的元素 #id #firstname 选择所有id="firstname"的元素 * * 选择所有元素 element p 选择所有< p>元素 element,element div,p 选择所有< div>元素和 <...
CSS3新特性
博哥的二进制世界
03-07 703
CSS3新特性
CSS3新增了哪些新特性？
最新发布
常来常往，共同成长
03-13 1785
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 而CSS3也增加了很多新特性，为开发带来了更佳的开发体验
css3新特性
qq_52928592的博客
01-29 387
作业
1.07 css3新特性
10-07
CSS3新特性 本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年...
深入了解CSS3新特性
07-22
资源名称：深入了解 CSS3 新特性资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
【全面】CSS3新增了哪些新特性？
有事儿私信。
09-19 2341
CSS3 是 CSS (Cascading Style Sheets) 的第三个主要版本，引入了许多令人兴奋的新特性和功能。在本文中，我们将介绍 CSS3 中一些重要的新增特性，并提供相应的代码示例。
H5新增的属性、样式
qq_40137713的博客
05-28 500
-新增元素 说明 新增元素 说明 viode 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcapton 图例的说明 main ti...
CSS基础知识（十四）：CSS3新特性
前端
11-05 742
文章目录一、CSS3新增选择器1.属性选择器2.结构伪类选择器3.伪元素选择器 。 一、CSS3新增选择器 1.属性选择器 属性选择器：根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 选择符 简介 E[att] 选择具有att属性的E元素 E[att=“value”] 选择具有att属性且属性值等于value的E元素 E[att^=value] 匹配具有att属性且属性值以value开头的E元素 E[att$=“value”] 匹配具有att属性且属性
CSS3新增特性
ee22ee的博客
01-29 762
CSS3新增特性
CSS3有哪些新特性？
W1254667的博客
01-06 178
CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）//旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景 rgba在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局CSS3中新增了一种盒模型计算方式：box-sizing。
关于CSS3的新特性（面试经典）
zhixuejia的博客
07-27 6390
1.过渡属性 transition： 要改变的属性，花费时间，效果曲线(默认ease)，延迟时间(默认0) 2.动画属性 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running） 3.圆角属性： CSS border-radius - 指定每个角 border-radius属性可以接受一到四个值。规则如下： 四个值 - border-radius: 15px...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值