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>