HTML+CSS学习09-CSS3新特性

新增选择器

类选择器、属性选择器、伪类选择器，权重为10

属性选择器

根据元素的特定属性选择元素

E[att]  //具有att属性的E元素
E[att="val"]  //具有att属性且属性值=val的E元素
E[att^="val"]  //具有att属性且属性值以val开头的E元素
E[att$="val"]  //具有att属性且属性值以val结尾的E元素
E[att*="val"]  //具有att属性且属性值包含val的E元素

input[value]{
	color:red;
}
input[type=text]{
	color:red;
}
input[class^=icon]{
	color:red;
}
input[class$=icon]{
	color:red;
}
input[class*=icon]{
	color:red;
}

结构伪类选择器

E:first-child  //对父元素的第一个子元素E
E:last-child  //对父元素的最后一个子元素E
E:nth-child(n)  //对父元素的第n个子元素E，填包含n的式子（从0开始），或数字，或关键字：even 偶数，odd 奇数
E:first-of-type  //对所有E元素编号，选中第一个E元素
E:last-of-type  //对所有E元素编号，选中最后一个E元素
E:nth-of-type(n)  //对所有E元素编号，选中第n个E元素

child是基于父元素编号，type是基于当前元素编号
无序列表用nth-child更多

//先看第几个孩子，再看是什么元素，元素匹配不上没有用，这里是div
section div:nth-child(1){
	color:red;
}
//先看是什么元素，再看是父元素的第几个
section div:nth-of-type(1){
	color:red;
}
<section>
	<div>1</div>
	<div>2</div>
</section>

伪元素选择器

权重为1
能够利用CSS创建新标签元素，不用html标签，简化html结构
创建元素为行内元素，称为伪元素，必须包含content属性

::before  //在元素内部的左边插入内容
::after  //在元素内部的右边插入内容

div::before{
	content:'开始';
}
div::after{
	content:'结束';
}

伪元素的应用–字体图标

ul li::after{
	position: absolute;
	top: 1px;
	right: 10px;
	color: #fff;
	content: '\e91e';
	font-size: 14px;
}

伪元素的应用–遮罩层

.tudou{
		width: 100px;
		height: 100px;
		position: relative;
	}
			
.tudou::before{
		content: '';
		position: absolute;
		display: none;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.4);
    }
.tudou:hover::before{
		display: block;
	}

<div class="tudou">xxx</div>

伪元素的应用–清除浮动

父级添加after伪元素

.clearfix::after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

或者父元素添加双伪元素

.clearfix::before, .clearfix::after{
	content:"";
	display:table;
}
.clearfix::after{
	clear:both;
}

CSS3盒子模型

box-sizing属性指定盒子模型

box-sizing: content-box;  //指定盒子大小为width+ padding+ border，改变padding和border盒子会被撑大
box-sizing: border-box;  //指定盒子大小为width，盒子不会被撑大

其他特性

filter滤镜

filter: blur(5px);  //模糊

calc函数

width: calc(100%-80px);

transition过渡

IE9以下版本不支持，常常和:hover一起使用

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
          //宽高边距等  以s为单位  默认ease(可省略)  以s为单位，默认0s (可省略)

div{
	transition: width .5s ease 0s;
	transition: width .5s, height .5s;
	transition: all 0.5s; 
}