css3

1什么是css3?

是css技术的升级版本,在css2的基础上,新增了许多特性,弥补了css2的不足,使web页面的开发变得更加高效、便捷

css3按模块化进行设计,比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面

css3优点: CSS3是完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。

2、新增选择器

1)属性选择器

css2属性选择器

ele[attr]{ } 指定了属性名为attr的ele元素

ele[attr=value]{ } 指定了属性名为attr且属性值为value的ele元素

ele[attr~=value]{ } 指定了属性名称attr,并且属性值词列表中包含value的ele元素

注意:要有词列表的时候,属性名=属性值是选择不上的

 1   /*带有class属性的div元素*/
 2     .wrap div[class]{
 3         background: red;
 4     }
 5     /*带有class属性,并且属性值为box的div元素*/
 6     .wrap div[class=box]{
 7         background: pink;
 8     }
 9     /* 带有class属性,并且属性值的词列表中包含box的div元素 */
10     .wrap div[class~=box]{
11         background: yellow;
12     }
13     /*带有type属性,并且属性值为text的input元素*/
14     .wrap input[type=text] {
15         border: 10px solid red;
16     }
17 18     /*带有type属性,并且属性值为password的input元素*/
19     .wrap input[type=password] {
20         border: 10px dotted blue;
21     }
22 23 注意:
24 25         /*要有词列表的时候,属性名=属性值是选择不上的,用~选*/
26        /* 选不上 */
27         .warp div[class=box2] {
28             background-color: burlywood;
29         }
30 31         .warp div[class~=box2] {
32             background-color: burlywood;
33         }
34 35 36    <div class="box1 box2">box2</div>
37    <div class="box3 box4">box4</div>

css3新增属性选择器

ele[attr^=value]{ } 指定了属性名attr,且属性值为value开头的ele元素

ele[attr$=value]{ } 指定了属性名attr,且属性值为value结尾的ele元素

ele[attr*=value]{ } 指定了属性名attr,且属性值包含value的ele元素

注意哦:不能以数字结尾和开头

 1   div {
 2             width: 100px;
 3             height: 100px;
 4         }
 5  6         /*带有class属性类名以box开头的div元素*/
 7         .warp div[class^=box] {
 8             background-color: tomato;
 9         }
10 11         /*带有class属性类名以b结尾的div元素*/
12         .warp div[class$=b] {
13             background-color: yellow;
14         }
15 16         /*带有id属性id名为box3的div元素*/
17         .warp div[id=box3] {
18             background-color: violet;
19         }
20 21         /*带有class属性,并且属性值有b的div元素*/
22         .warp div[class*=b] {
23             font-size: 30px;
24         }
25 26         /*带有id属性,并且属性值有b的div元素*/
27         .warp div[id*=b] {
28             font-size: 40px;
29         }

2)结构伪类选择器

:root{ } 匹配文档根元素

ele:first-child{ } 选择一组相同元素中的第一个元素

ele:last-child{ } 选择一组相同元素中的最后一个元素

ele:nth-child(n){ } 选择一组相同元素中的第n个元素,n可以是数值、关键词、表达式

数值

关键词:odd(奇数)|even(偶数)

表达式:2n(偶数)|2n+1(奇数)

ele:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素,n表示数值、关键词、表达式

备注: 以上元素类型必须一样

ele:first-of-type 选择一组元素中特定类型的第一个子元素

ele:last-of-type 选择一组元素中特定类型的最后一个子元素

ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素

ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素

备注 : 以上元素类型可以不一样

child一组与of-type一组的区别

nth-child强调结构 关系,查找子元素中的第几个

nth-of-type强调类型,查找类型中的第几个

 1 **备注: 以上元素必须类型一样** 
 2  3 /* 根元素 */
 4         :root {
 5             background-color: azure;
 6         }
 7  8         .wrap div {
 9             width: 100px;
10             height: 100px;
11         }
12 13         /* **备注: 以上元素必须类型一样** */
14 15         /* 第一个元素 */
16         .wrap div:first-child {
17             background-color: tomato;
18         }
19 20         /* 最后一个元素 */
21         .wrap div:last-child {
22             background-color: purple;
23         }
24 25         /* div第2个元素 */
26         .wrap div:nth-child(2) {
27             background-color: pink;
28         }
29 30         /* ele:nth-last-child(n) {}
31 32         选择一组相同元素中的倒数第n个元素,n表示数值、关键词、表达式 */
33         /* 倒数第2个div元素 */
34         .wrap div:nth-last-child(2) {
35             background-color: antiquewhite;
36         }
37 38     <div class="wrap">
39         <div>第一 1</div>
40         <div>2</div>
41         <div>3</div>
42         <div>4</div>
43         <div>5倒数第2</div>
44         <div>最后一个6</div>
45     </div>
46 
 1 - ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素
 2 - ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素
 3  4  5         /* ele:first-of-type 选择一组元素中特定类型的第一个子元素的每个元素 */
 6         .wrap span:first-of-type {
 7             font-size: 40px;
 8         }
 9 10         .wrap p:first-of-type {
11             background-color: yellowgreen;
12         }
13 14         .wrap h3:first-of-type {
15             background-color: tomato;
16         }
17 18         /* - ele:last-of-type 选择一组元素中特定类型的最后一个子元素的每个元素 */
19         .wrap span:last-of-type {
20             font-size: 30px;
21             color: tomato;
22         }
23 24         .wrap p:last-of-type {
25             background-color: purple;
26         }
27 28         /* - ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素  */
29         .wrap p:nth-of-type(2) {
30             color: blue;
31             font-size: 30px;
32         }
33 34         .wrap span:nth-of-type(2) {
35             color: blue;
36             font-size: 30px;
37         }
38 39         /* - ele:nth-last-of-type(n){ } 选择一组元素中特定类型的倒数第n个ele元素 */
40         .wrap p:nth-last-of-type(3) {
41             color: tomato;
42             font-size: 40px;
43         }
44 45     <div class="wrap">
46         <span>0span</span>
47         <p>p1</p>
48         <p>p2</p>
49         <h3>h3</h3>
50         <p>p3</p>
51         <p>p4</p>
52         <p>p5</p>
53         <span>6span</span>
54         <span>7span</span>
55     </div>

3)状态伪类选择器

  • ele:disabled{ } 选择界面上处于禁用状态的元素

  • ele:enabled{ } 选择界面上处于可用状态的元素

  • ele:checked{ } 选择界面上处于被选中状态的元素

 1   /* ele:enabled{ } 选择界面上处于可用状态的元素 */
 2         input:enabled {
 3             background-color: tomato;
 4         }
 5  6         input[type=password]:enabled {
 7             background-color: yellowgreen;
 8         }
 9 10         /* ele:disabled{ } 选择界面上处于禁用状态的元素 */
11         input:disabled {
12             background-color: purple;
13         }
14 15         /* ele:checked{ } 选择界面上处于被选中状态的元素 */
16         input:checked {
17             width: 50px;
18             height: 50px;
19             opacity: .5;
20         }
21 22         input[type=radio]:checked {
23             width: 30px;
24             height: 30px;
25             opacity: .5;
26         }
27 28 29     <ol>
30         <li>
31             账号:<input type="text">
32         </li>
33         <li>
34             密码:<input type="password">
35         </li>
36         <li>
37             账号1:<input type="text" disabled>
38         </li>
39         <li>
40             账号2:<input type="text" disabled>
41         </li>
42         <li>
43             性别:<input type="radio" checked>男
44             <input type="radio">女
45         </li>
46         <li>
47             性别:<input type="checkbox">吃饭
48             <input type="checkbox" checked>睡觉
49             <input type="checkbox" checked>打豆豆
50         </li>
51     </ol>

 

4)修改表单元素的placeholder的样式

 1 /*修改placeholder默认样式*/
 2 input::placeholder {
 3     color: tomato;
 4 }
 5  6  7 /*修改获取焦点后placeholder的样式*/
 8 input:focus::placeholder {
 9     color: yellowgreen;
10 }

 



posted @ 2023-12-26 14:31  半世晨曦昏晓  阅读(15)  评论(0编辑  收藏  举报