css3新增选择器

一、属性选择器

<style>
/*1.属性选择器：用中括号选择含有value属性的input元素*/
input[value]{
	color: blue;
}
/*2.属性选择器：用中括号选择含有value属性值为password的input元素*/
input[type=password]{
	color:red;
}

/*3.属性选择器：选择以icon开头的属性*/
div[class^=icon]{
	width: 100px;
	height: 50px;
	border: 1px solid red;
	background-color: skyblue;
}

/*4.用属性选择器选择以data结尾的属性*/
section[class$=data]{
	color: green;
}

/*5.类名包含icon的所有标签*/
[class*=icon]{
	margin:0 auto;
}
</style>
<input type="text" value="请输入用户名">
<input type="password">

<!-- 用属性选择器选择以icon开头的属性 -->
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon4"></div>
<div class="icon5"></div>

<!-- 用属性选择器选择以data结尾的属性 -->
<section class="icon1-data">data结尾</section>
<section class="icon2-data">data结尾</section>
<section class="ss3-aa">aa结尾=不包含icon</section>

二、结构伪类选择器