•          通用选择器，匹配任何元素
  

E 标签选择器，匹配所有使用E标签（所有HTML元素）的元素
.info class选择器，匹配所有CLASS属性中包含info的元素

footer id选择器，匹配所有id属性等于footer的元素

div , p 选择所有div 元素 和 p 元素
<style> div ,p {
color:red;
}
</style>
<div> red</div>
<p>red</p>
div p 选择所有DIV 元素内部的所有P 元素 （可以是元素，可以是ID）
<style> div p {
color:red;
}
</style>
<div> <p>red</p> <p>red</p></div>

 div > p    选择div 元素的第一层 p元素，就是找儿子 （可以是元素，可以是ID）
                        <style> div > p {
                             color:red;
                                  }
                         </style>
                          <div> <p>red</p></div>
                          
 div + p    选择匹配所有紧邻div元素"之后"的 第一个p元素   （可以是元素，可以是ID）
                    <style> div +p {
                             color:red;
                      }
                    </style>
                    <div> zxc</div>
                    <p>red</p>
    div ~ p    选择 div 所有紧邻div元素"之后"的  所有p  元素  
                    <style> div ~ p {
                             color:red;
                      }
                    </style>
                    <div> zxc</div>
                    <p>red</p>
                    <p>red</p>

        属性选择器
           E[title]匹配所有具有title 属性的E元素，不考虑他的值 （E 可以省略）
                                  <style>      div[id] {
                                                    color:red;
                                                 }
                                   </style>
                        <div id="one"> zxc</div>

E[algin=center] 匹配所有title属性等于“center” 的E 元素。（E 可以省略）
<style> div[algin=center] {
color:red;
}
</style>
<div algin="center"> zxc</div>

E[class ~= var] 匹配所有 class 属性具有多个空格分隔的值，其中一个值等于var 的E元素。E可以省
略，var可以是属性的自定义内容

                                          <style>      div[class ~=one] {
                                                       color:red;
                                                     }
                                          </style>
                                               <div class="one two three"> zxc</div>

E[att |= val ] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val-” 开头的E元素。主要用于lang属性，比如“en” 、“en-us” 、“en-gb” 等等

                                          <style>      p[title |=one] {
                                                       color:red;
                                                     }
                                          </style>
                                               <p  tilte="one-two-three"> zxc</p>

E[att ^="val"] 属性att 的值以val开头的元素。

                                    <style>      a[ href ^= www] {
                                                    color:red;
                                                 }
                                   </style>
                        <a href="www.baidu.com">xcxc</a>

E[att $=''val''] 属性att 的值以val结尾的元素

                                    <style>      a[ href $= com] {
                                                    color:red;
                                                 }
                                   </style>
                        <a href="www.baidu.com">xcxc</a>

E[att *= ''val''] 属性att的值包含val字符串的元素

                                    <style>      a[ href *= com] {
                                                    color:red;
                                                 }
                                   </style>
                        <a href="www.baidu.com">xcxc</a>