CSS3新增特性:
2.1CSS3的现状
1.新增的CSS3特性有兼容性问题,ie9+才支持
2.移动端支持由于pc端
3.不断改进中
4.应用相对广泛
5.现阶段主要学习:新增选择器和盒子模型以及其他特性
CSS3新增选择器
CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
1.属性选择器
2.结构伪类选择器
3.伪元素选择器
2.2属性选择器
属性选择器可以根据元素特定的属性来选择元素,这样就可以不借助于类或者id选择器
1.选择属性来选择
例子:
input[value]{
color:pink;
}
<input type="text" value="请输入用户名">
<input type="text">
这样选择的就是必须是input但是还要具有value属性,选择这个元素。甚至还可以选择属性里面的值,例如input[type=“text”]{color:red;}重点
2.以什么开头来选择
这些都具有class这个属性,并且这个值以icon开头,想让这些文字变为红色
div[class^=icon] {
color: red;
}
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
3.以什么结尾来选择
都有class属性,且前两个以data结尾,让前两个文字变为蓝色
section[class$=data] {
color: blue;
}
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
**注意:类选择器、属性选择器、伪类选择器,权重都是10。**
2.3结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素,常用于跟父级选择器里面的子元素。
选择符 简介
E:first-child 匹配父元素的第一个子元素E
E: last-child 匹配父元素中最后一个E元素
E: nth-child(n) 匹配元素中的第n个子元素E
E: first-of-type 指定类型E的以第一个
E: last-of-type 指定类型E的最后一个
E: nth-of-type(n) 指定类型E的第n个
type类型和child类型使用起来类似
区别
nth-child对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子,然后再看标签是否匹配
nth-of-type对父元素里面指定子元素进行排序选择,然后去匹配E,再根据E找第n个孩子
nth-child(n)选择某个父元素的一个或多个特定的子元素
nth-child和 nth-of-type里面的n
1.n可以是数字,关键字和公式
2.n如果是数字,就是选择第n个子元素,n>=1;
3.n可以是关键字:even偶数,odd奇数。
4.n可以是公式:常见的公式如下(如果n1是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
2n 选取偶数 等价于even
2n+1 选取奇数 等价于odd
5n 5 10 15...选
n+5 从第5个开始选
-n+5 前五个选
表格隔行变色可以用nth-child(even/odd)来做
nth-child(n)重点
nth-child(n)从0开始,每次加1,往后面计算,这里面必须是n,不能是其他的字母 ,选择了所有孩子!
ol li:nth-child(n) {
background-color: blue;
}
2.4伪元素选择器(重点)
为元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意
1.before 和after创建一个元素,属于行内元素!!
2.新创建的这个元素在文档树种是找不到的,所以我们称为伪元素
3.语法:element::before{content:'';}content不能省略。
4.before和after必须有content属性
5.before在父元素内容的前面创建元素,after在父元素内容后面插入元素
6.伪元素选择器和标签选择器一样,权重为1
语法:
.weiyuansu {
width: 150px;
height: 60px;
background-color: yellow;
}
.weiyuansu::before {
content: '是的';
}
使用场景:以后遇到字体图标的时候,可以用伪元素来做,然后利用定位定到想要的位置,再加加入字体图标的相关内容。
当鼠标经过.tudou 里面的伪元素before显示出来!
.tudou:hover::before {
display: block;
}
伪元素还可以清除浮动
2.5CSS3盒子模型
CSS3中可以通过box-sizing来指定盒子模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变
可以分成两种情况
1.box-sizing:content-box盒子大小为width+padding+border(以前默认的)
2.box-sizing:border-box盒子大小为width 可以使得我们padding+border就不会撑大盒子。前提padding和border不会超过width的宽度
*{
box-sizing:border-box;
}
2.6CSS3其他特性(了解)
1.图片模糊
2.计算盒子宽度width:calc函数
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
filter:函数 例如:filter:blur(5px); blur模糊处理 数值越大越模糊
img {
filter: blur(5px);
}
img:hover {
filter: blur(0);
}
CSS3 calc函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100%-80px);
括号里面可以有+、-、*、/来进行计算,运算符要加空格
CSS3还增加了一些动画2D 3D等新特性。
例:
.fa {
width: 400px;
height: 200px;
background-color: pink;
}
.son {
width: calc(100% - 30px);
height: 30px;
background-color: purple;
}
子盒子永远比父盒子小30px。
2.7CSS3过渡(重点)!!
过渡(transition)是CSS3中最具颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一中样式变换为另一种样式时为元素添加效果
过渡动画:是从一个状态,渐渐过渡到另外一个状态
可以让我们页面更好看,更动感十足,虽然版本底的浏览器不支持(ie9以下版本)但是不会影响页面布局。
我们现在经常和:hover一起搭配使用。
语法:
谁做过渡给谁加transition
transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性,想要变化的CSS属性,宽度,高度,背景颜色,内外边距都可以,如果想要所有属性都变化过渡,写一个all就可以
2.花费时间:单位是秒(必须写单位)比如0.5s
3.运动曲线:默认是ease(可以省略)
4.何时开始:单位是秒(必须写单位)可以设置延迟触发时间 默认是0s(可以省略)
例子:
transition:all 3s;
transition: width 3s, height 3s;