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函数

过渡

热门文章

最新文章

相关课程

相关电子书

相关实验场景