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 }