CSS3 新特性

简介: 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>


目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
50 1
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
251 91
|
3月前
|
前端开发 JavaScript API
Vue 3 新特性:在 Composition API 中使用 CSS Modules
Vue 3 新特性:在 Composition API 中使用 CSS Modules
|
6月前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
60 2
|
5月前
|
前端开发
番外篇-CSS3新增特性
番外篇-CSS3新增特性
30 0
|
6月前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
148 1
|
6月前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
|
6月前
|
前端开发 容器
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
51 10
|
6月前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
6月前
|
前端开发
css的特性
【4月更文挑战第11天】css的特性
28 1