通用选择器，匹配任何元素
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>