之前的css属性选择器包括：类选择器，id选择器，标签选择器，关联选择器，组合选择器，伪类选择器等
css3属性选择器
/*1、有class属性的input属性*/
input[class] {
background-color: red;
}
/*2、class属性是first的元素*/
input[class=first] {
background-color: blue;
}
/*3、class=first的元素*/
[class=first] {
background-color: green;
}
/*4、input的name属性值以first开头，^=是以什么开头*/
input[name^=first] {
background-color: yellow;
}
/*5、input的name属性值以name结尾，$=是以什么结尾*/
input[name$=name] {
background-color: lightgrey;
}
/*6、input的name属性值包含stna字符串的元素，*=是包含什么*/
input[name*=stna] {
background-color: pink;
}
需要注意的就是：元素与后面
[ ]之间，不要有空格，否则会失效
css3伪类选择器
css2中：
:hover, :link, :active, :visited
E:fisrt-child E的父元素的第一个子元素
E:last-child E的父元素的最后一个子元素
:root
E:nth-child(n) E的父元素的第n个子元素
E:nth-last-child(n) E的父元素的倒数第n个子元素
E:empty 不包含任何内容的元素
E:enabled 匹配可用的元素
E:disabled 匹配不可用的元素
E:check 匹配选中的元素
css3伪对象选择器
:before：在盒子内部的前面插入一个行显示的盒子
:after：在盒子内部的后面插入一个行显示的黑子
以上2个都是inline类型，设置宽高生效的话，需要display：block；
#shi {
border: 1px solid red;
}
#shi:before {
content: '锄禾日当午，';
width: 150px;
background-color: #f00;
display: inline-block;
}
#shi:after {
content: '谁知盘中餐，';
width: 200px;
background-color: #036;
display: inline-block;
}
注意：这个选择器必须和content一起使用，即使没有内容插入。
demo
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#con {
width: 300px;
height: 30px;
line-height: 30px;
font-size: 12px;
margin: auto;
border: 1px solid lightgrey;
}
#con input {
margin: 0px;
padding: 0px;
width: 210px;
height: 30px;
border: none;
}
#con:before {
content: '';
width: 24px;
height: 24px;
background: url(src/images/cone_24px_1185590_easyicon.net.png) no-repeat;
display: inline-block;
vertical-align: middle;
margin: -2px 15px 0px 5px;
}
#con:after {
content: '';
width: 24px;
height: 24px;
background: url(src/images/address_book_alt_21.013333333333px_1185558_easyicon.net.png) no-repeat;
vertical-align: middle;
display: inline-block;
margin: -2px 5px 0 0;
}
</style>
</head>
<body style="padding:50px;background-color:#ccc">
<div class="container" style="padding:30px;background-color:#fff;">
<div id="con">
<input type="text" value="搜索我的礼物">
</div>
</div>
</body>
</html>
<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
