CSS3 新特性-阿里云开发者社区

CSS3 新特性

2024-05-23 83

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS3 新特性

CSS3新增选择器

属性选择器
结构伪类选择器 : 根据文档结构选择元素.
伪元素选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器

假如我有如下的标签:

1. <body>
2. <input type="text" name="" id="" value="123">
3. <input type="password" name="" id="">
4. </body>

我想要选择 input标签, 然后必须具有value属性:

1. input[value] {
2. color: pink;
3.         }

我不仅要选择有什么属性, 我还要选择属性=对应值的属性:

1. input[value=123] { /*= 后面可以加引号也可以不加引号*/
2. color: pink;
3.         }

现在假设我要选择下面这四个标签, 我该如何做呢 ?

1. <div class="icon1">小图标1</div>
2. <div class="icon2">小图标2</div>
3. <div class="icon3">小图标3</div>
4. <div class="icon4">小图标4</div>

第一想到的是可以使用并集选择器, 但是写起来很麻烦, 我们可以使用 h5新增特性:

1. div[class^=icon] {
2. color: red;
3.         }

^=表示匹配的必须是icon开头的值.

当然我也可以选择以$=E来选择以E结尾的元素, 或者是*=E, 表示值含有E的属性.

注意: 类选择器, 属性选择器, 伪类选择器权重都是10.

结构选择器

下面是结构选择器的样式:

例如:

1. <body>
2. <ul>
3. <li>我是第1个孩子</li>
4. <li>我是第2个孩子</li>
5. <li>我是第3个孩子</li>
6. <li>我是第4个孩子</li>
7. <li>我是第5个孩子</li>
8. <li>我是第6个孩子</li>
9. </ul>
10. </body>

我要选择ul中的第一个li:

1. 
2. ul li:first-child { /*表示我选择了里面所有li标签中, 第一个li*/
3. /* 结构伪类选择器 */
4. background-color: pink;
5.     }

最后一个li使用:

1. ul li:last-child { /*ul中最后一个li元素*/
2. background-color: pink;
3.     }

当然也可以选择某个父元素中一个或者多个特定的子元素: nth-child(n)

n 可以是数组, 公式和关键字
如果n是数字, 就是选择第n个元素, 里面数字是从1开始

例如我想要选择上述案例中的第二个li :

1. ul li:nth-child(2) {
2. background-color: blue;
3.     }

如果nth-child中的参数写的是关键字, 例如even :

1. <ul>
2. <li>我是第1个孩子</li>
3. <li>我是第2个孩子</li>
4. <li>我是第3个孩子</li>
5. <li>我是第4个孩子</li>
6. <li>我是第5个孩子</li>
7. <li>我是第6个孩子</li>
8. <li>我是第7个孩子</li>
9. <li>我是第8个孩子</li>
10. </ul>

我想要将这里面的第偶数个li改为灰色:

1. ul li:nth-child(even) {
2. background-color: #ccc;
3.         }

然后将奇数的孩子选择出来, 然后改为另外一种颜色:

1. /* 2.把所有的奇数 odd的孩子选出来 */
2. ul li:nth-child(odd) {
3. background-color: gray;
4.         }

效果如下:

nth-child使用公式:

1. <ol>
2. <li>我是第1个孩子</li>
3. <li>我是第2个孩子</li>
4. <li>我是第3个孩子</li>
5. <li>我是第4个孩子</li>
6. <li>我是第5个孩子</li>
7. <li>我是第6个孩子</li>
8. <li>我是第7个孩子</li>
9. <li>我是第8个孩子</li>
10. </ol>

1. ol li:nth-child(n) {
2. background-color: pink;
3.         }

表示n从0开始, 每次+1, 往后面计算, 这里必须是n, 不能是其他的字母, 如果写了n, 代表选择了所有的孩子:

1. ol li:nth-child(-n + 3) {
2. background-color: pink;
3.         }

效果如下:

注意 : 此处需要注意nth-of-type和nth-child() 有所不同, type会过滤前面的非指定的元素, 然后去看第几个孩子, 但是nth-child是不会过滤非指定元素, 会将所有的child进行匹配满足括号内的内容.

伪元素选择器

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

注意:

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1

例如下面有一个div,, 使用了伪元素, 其声明是before还是after的效果如下:

通过代码验证:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>伪元素选择器before和after</title>
8. <style>
9. div {
10. width: 200px;
11. height: 200px;
12. background-color: pink;
13.         }
14. /* div::before 权重是2 */
15. div::before {
16. /* 这个content是必须要写的 */
17. /* display: inline-block; */
18. content: '我';
19. /* width: 30px;
20.             height: 40px;
21.             background-color: purple; */
22.         }
23. div::after {
24. content: '小猪佩奇';
25.         }
26. </style>
27. </head>
28. <body>
29. <div>
30.         是
31. </div>
32. </body>
33. </html>

无论是before还是after, 都是行内元素. 可以使用block来改变盒子模型.

伪元素快速清除浮动:

给父元素添加一个after伪元素,

这个伪元素的content为空, 伪元素本来为行内元素, 现在需要将其设置为块级元素, 也就是block:

1. .clearfix:after {
2. content: "";
3. display: block;
4. height: 0;
5. clear: both;
6. visibility: hidden;
7.     }

盒子模型

我们在设置了一个盒子的高度和宽度和边框之后, 如果还想添加内边距, 那么就会撑大盒子, 设置内边距之后, 如果我们想要保持原来盒子的大小, 就不得不去减去高度和宽度, 这样子就很麻烦, 于是css3新推出了一个特性, 可以使用box-sizing来指定盒子模型

box-sizing有两个值, 即content-box, 和border-box, 这样我们计算盒子大小的方式就发生了变化,

分为两种情况:

以前是border + width/height + padding, 也就是默认的box-sizing: context-box;
第二种是box-sizing : border-box 盒子大小为width

如下:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>CSS3盒子模型</title>
8. <style>
9.         * {
10. margin: 0;
11. padding: 0;
12. box-sizing: border-box;
13.         }
14. div {
15. width: 200px;
16. height: 200px;
17. background-color: pink;
18. border: 20px solid red;
19. padding: 15px;
20. box-sizing: content-box;
21.         }
22. p {
23. width: 200px;
24. height: 200px;
25. background-color: pink;
26. border: 20px solid red;
27. padding: 15px;
28. /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
29. box-sizing: border-box;
30.         }
31. </style>
32. </head>
33. <body>
34. <div>
35.         小猪乔治
36. </div>
37. <p>
38.         小猪佩奇
39. </p>
40. </body>
41. </html>

盒子模型改为border-box之后, 盒子的大小就不会被padding撑大了

图片模糊

使用filter : blur(npx) 来设置img图片的模糊, n越大越模糊:

1. img {
2. filter: blur(2px);
3. }

calc函数

我们有的时候需要使用百分号%来设置宽度或者定位, 但是这个还不够, 有时候还需要搭配margin来获取更精确位置, 但是这很不方便, 尤其是在盒子模型中.

比如我们使用绝对定位, 让一个图片居中显示, 可能会用到:

1. img {
2. position: absolute;
3. top: 50%;
4. margin-top: -20px; /*自己高度的一般*/
5. }

我们可不可以直接将两行计算在一行, 当然可以, 使用calc函数:

1. img {
2. position: absolute;
3. top: calc(50% - 20px);
4. }

过渡

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

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

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。经常与hover搭配使用.

使用transition这个属性来实现.如法如下:

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

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

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>CSS3 过渡效果</title>
8. <style>
9. div {
10. width: 200px;
11. height: 100px;
12. background-color: pink;
13. /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
14. /* transition: width .5s ease 0s, height .5s ease 1s; */
15. /* 如果想要写多个属性，利用逗号进行分割 */
16. /* transition: width .5s, height .5s; */
17. /* 如果想要多个属性都变化，属性写all就可以了 */
18. /* transition: height .5s ease 1s; */
19. /* 谁做过渡，给谁加 */
20. transition: all 0.5s;
21.         }
22. div:hover {
23. width: 400px;
24. height: 200px;
25. background-color: skyblue;
26.         }
27. </style>
28. </head>
29. <body>
30. <div></div>
31. </body>
32. </html>

案例: 进度条

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Document</title>
7. <style>
8. .bar {
9. width: 150px;
10. height: 15px;
11. padding: 1px;
12. border: 1px solid red;
13. border-radius: 7px;
14.     }
15. .bar_in {
16. width: 50%;
17. height: 100%;
18. background-color: red;
19. transition: all .6s;
20.     }
21. 
22. .bar:hover .bar_in{
23. width: 100%;
24.     }
25. 
26. </style>
27. </head>
28. <body>
29. <div class="bar">
30. <div class="bar_in">
31. 
32. </div>
33. </div>
34. </body>
35. </html>

CSS3 新特性

CSS3新增选择器

属性选择器

结构选择器

伪元素选择器

盒子模型

图片模糊

calc函数

过渡

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS3 新特性

CSS3新增选择器

结构选择器

盒子模型

图片模糊

calc函数

过渡

热门文章

最新文章

相关课程

相关电子书

相关实验场景