一、选择符的种类
1）通配选择符
它用来给页面所有的元素设置样式
*{margin:0;padding:0;}。但是实际当中不建议这么用，页面中用到了哪些样式，就统一设置样式，因为*影响性能。也可以给某元素的所有的后代元素应用样式：p *{color:red;}
2）标签选择符
顾名思义，通过标签来限定样式作用域
div{padding:5px;}
3）类选择符
和面向对象中的类有着类似的功能，需要的时候调用即可，达到重用的目的。将样式定义成一个类，需要使用的地方调用即可。
.myClass{font-size:24px;}
<p>普通文字<p>
<p class="myClass">自定义样式</p>
4）ID选择器
通过#ID来精确定位页面元素的属性
#trapper{padding:10px;font-size:26px;}
<div id="trapper">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
5）包含选择符
直接上实例
div strong{font-size:24px;text-decoration:underline;}
<div>
<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>
<strong>我是div中的strong内容（”孩子”）</strong>
</div>
可见，包含选择会将某元素下的所有包含元素都设置样式。不管层级有多深。
6）子选择符
和上边的区别，大家看出来了吗？
div>strong{font-size:24px;text-decoration:underline;}
<div>
<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>
<strong>我是div中的strong内容（”孩子”）</strong>
</div>
7）相邻选择符
控制相邻的元素样式
div+strong{font-size:24px;text-decoration:underline;}
<div>
<strong>我是p的邻居</strong>
<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>
<div>div中的div</div>
<strong>我是div中的strong内容（”孩子”），而且我也是p的邻居</strong>
<strong>我显示有下滑线吗</strong>
</div>
要是p+strong+strong呢？strong+strong(可以并排多个strong看看效果)？css很强大！！
8）属性选择符
四种方式
E[attr] 具有attr属性的所有HTML标签 ，如div[class]表示具有class属性的所有div
E[attr="value"] 具有attr属性且属性值为value的标签，如input[type="text"]{border:2px;}
E[attr~="value"] 具有attr属性，且有多个空格隔开的字段，其中一个字段为value的元素。
E[attr|="value"] 具有attr标签，且必须以value值开始及使用-分隔的元素
9）混合选择符
如p.className p#id等等
二、CSS选择符优先级计算
总体上按照就近原则应用样式。一般计算如下
行内样式：1000
ID选择符：0100
类选择符：0010
标签选择符：0001
例如：body #wrapper p {...}，那么它的优先级指数就是 1+100+1=102，而body div #wrapper p {...}的优先级指数就是 1+ 1 +100 + 1 =103
但需要注意一个关键字!important，除了IE6,他的css优先级最高。
#box {
color:red !important;
color:blue;
}
这样，对于IE7+显示字体颜色为红色，不会被蓝色覆盖掉。IE6显示为蓝色。
本文参考 CSS那些事儿，大家想看详细信息，请看这本书