关于CSS选择器，首先请看这里： CSS 选择器参考手册
通过以上，我们可以将CSS选择器分为以下几种：
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
示例：
说明：以下E表示元素，attr表示属性，val表示属性的值。
说明：以下E表示元素
示例：
示例：
示例：
示例：
E:not(s) ,匹配不符合当前选择器的任何元素
示例：
E:target ,匹配文档中特定"id"点击后的效果
示例：
这里我们简单讨论下后代元素选择器和子元素选择器的区别
示例
CSS优先级是指CSS样式在浏览器中被解析的 先后顺序 。
多重样式（Mutiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是多重样式的使用情况。
一般情况下，（ 外部 样式）External style sheet <（ 内部 样式）Internal style sheet <（ 内联 样式）Inline style
例外 ：如果外部样式放在内部样式的后面，则外部样式将会覆盖内部样式。
示例：
给不同的选择器分配不同的权值
解释：
示例
结果：标签内的数据显示为蓝色。
比较样式的优先级是，只需统计不同选择器的个数，然后与对应的权值相乘即可。根据结果便可得出优先级。
看到这里，有些同学是不是对!important有点迷惑呀 为什么有了它，就优先级最高呐 下面我们再来详细讲一讲!important~
!important 是CSS1就定义的语法，作用是提高指定样式的应用优先权。
语法格式： {cssRule !important} ，即写在定义的最后面，例如： box { color: red !important}
声明了 !important 的样式，具有最高的优先级，相当于写在最下面（最后定义）
IE 6.0 不完全 支持!important
IE支持重定义中的!important，例如：
你将会发现定义了样式 class="yuanxin" 时，在IE下，字体显示为红色（#e00）。
但不支持同一定义中的 !important 。例如：
此时在IE6下不支持，你将会发现定义了样式 class="yuanxin" 时，字体显示为黑色（#000）。
解释 ：
important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高，否则当含!important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为!important较低!
再举一个例子：
因为IE 6.0一直都不完全支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。
完。
总结内容参考以下：
w3school_CSS 选择器参考手册
阮一峰_CSS选择器笔记
css选择器优先级深入理解
CSS 的优先级机制[总结]
十分感谢你们的分享 n(*≧▽≦*)n
注：原文章首发于： CSS选择器、优先级以及!important知识总结 ，现迁移至此。
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
1、css() 方法设置或返回被选元素的一个或多个样式属性。2、val() 方法返回或设置被选元素的值。
3、attr() 方法设置或返回被选元素的属性值。
4、addClass() 方法向被选元素添加一个或多个类。
5、html() 方法返回或设置被选元素的内容 (inner HTML)。
6、text() 方法方法设置或返回被选元素的文本内容。
1.后代选择器：E F 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
<style>ul li{
color: red } </style>
<ul>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
</ul> li是ul的孙子级别
<ul>
<p><li>我是ul里面的li</li></p>
<p><li>我是ul里面的li</li></p>
<p><li>我是ul里面的li</li></p>
</ul> li是ul的孙子级别
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入，空格可以多 但是不可以插入其他的符号以免造成干扰。 li 被 ul包裹的情况下 颜色变红
2.子选择器：E>F 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
<style>div span{
color: red }
h2 >span{ color: green} </style>
<div>
<p><span>早上好</span></p>
<p><h1><span>我是标题</span></h1></p>
<h2><span>晚上好</span></h2>
</div>
div元素中包裹的子元素span 显示为红色，h2元素中包裹的子元素span显示为绿色，>左右可以添加空格
3.相邻选择器： E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
<style>.main+p{
background: green} </style>
<div> <p>我是谁</p>
<p class="main">我是谁</p>
<p>我是谁</p> </div>
类选择器main相邻的下一个p背景色变绿
4.通用选择器：E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
<style> .ab~p{
background: red} </style>
<div> <p class="ab">111</p>
<p>222</p>
<p >333</p>
<p>444</p>
<p>555</p> </div>
类选择器ab下面的所有p标签都会变成红色
1.E[attr]属性选择器： E[attr] 选择匹配具有属性attr的E元素
<style> dd[class]{
background: red} </style>
<dl> <dt>汽车</dt>
<dd>宝马</dd>
<dd class>奔驰</dd>
<dd>奥迪</dd> </dl>
[ ]表示属性的意思 里面写具体属性的名称比如 [id]
2.E[attr=val]属性选择器:E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
<style> dd[class=two]{
background: red } </style>
<dl> <dt>标题</dt>
<dd class="one">我是定义列表1</dd>
<dd class="one">我是定义列表1</dd>
<dd class="two">我是定义列表2</dd> </dl>
E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中,dd元素中class的值为two的背景颜色变成红色
3.E[attr*=val]属性选择器: 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”
dd[class=two]{<style>p[class*=b]
属性后面的值加不加引号（包括单引号和双引号）都可以 当时遇到特殊符号需要加引号
background: red } </style>
<div> <p >111</p>
<p class="b1">222</p>
<p class="b2">333</p> </div>
p元素中class的值只要包含b的背景色都会变成红色,
4.E[attr^=val]属性选择器:E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
<style> a[href^='http://']{
background:red } </style>
在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号（单引号和双引号）包裹一下
<a href="http://www.baidu.com">跳转百度</a>
<a href="www.baidu.com">不能跳转百度</a>
表示 属性href是以http开头的a元素 背景色变成红色
5.E[attr$=val]属性选择器:E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
a[href^='http://']{<style>a[href$=".cm"]
background:red } </style>
在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号（单引号和双引号）包裹一下
<a href="http://www.baidu.com">能跳百度</a>
<a href="http://www.baidu.cn">因为百度把.cm的域名也买了所以也能跳了</a>
表示 属性href是以cn结尾的a元素 背景色变成红色
