一、CSS选择器
关于CSS选择器，首先请看这里：CSS 选择器参考手册
通过以上，我们可以将CSS选择器分为以下几种：
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
基本选择器
- ID选择器（#footer），匹配所有id属性等于footer的元素。
- 类选择器（.info），匹配所有class属性中包含info的元素。
- 通用选择器（*），匹配任何元素。
- 标签选择器（E），匹配所有使用E标签的元素。
- 同级元素选择器（E~F ），匹配任何在E元素之后的同级F元素(CSS3)。
示例：
#footer { background: #999;}
.info { background: #000;}
* { margin: 0;padding: 0; }
div { border: 1px #000000 solid; }
p ~ ul { background: #000000; }
属性选择器
说明：以下E表示元素，attr表示属性，val表示属性的值。
-
E[attr]选择器匹配所有具有attr属性的E元素，不考虑它的值。（注：E在此处可以省略，比如“[checked]”.）
示例2：匹配所有含有title属性的元素
看出区别了么~ 示例2就是比示例1省略了元素名div~
-
E[attr=val]匹配所有attr属性值为val的E元素。（注：同上，这里的E也可以省略。）
-
E[attr~=val]匹配具有attr属性且属性值用空格分隔的字符列表。
示例：匹配具有class属性且其中一个属性值为name的div元素
运行代码，我们可以看到第一个div会应用上面的样式~
-
E[attr|=val]匹配具有attr属性且属性值为用连接符（-）分隔的字符串，并以val开头的E元素。
示例： 匹配所有以test开头并以-连接的具有class属性的div元素
运行代码，可以看出第二个div会应用上面的样式~
E[attr^="val"],属性attr的值以"val"开头的元素（CSS3）。E[attr$=“val”],属性attr的值以"val"结尾的元素（CSS3）。E[attr*="val"],属性attr的值包含"val"字符串的元素（CSS3）。
组合选择器
-
多元素选择器（
E, F），同时匹配多有E元素或F元素。 -
后代选择器（
E F），匹配所有属于E元素后代的F元素，E和F之间用空格分隔。 -
子元素选择器（
E > F）， 匹配所有E元素的子元素F。 -
相邻选择器（
E + F），匹配所有紧随E元素之后的同级元素F。可以发现，我们的样式只对紧跟div的第一个p元素起作用~
伪类选择器
说明：以下E表示元素
CSS2.1中的伪类：
-
E:first-child, 匹配父元素的第一个元素。 -
E:link, 匹配所有未被点击的链接. -
E:visited, 匹配所有已被点击的链接。 -
E:active, 匹配鼠标已经将其按下，还没释放的E元素。 -
E:hover, 匹配鼠标悬停其上的E元素。 -
E:focus, 匹配获得当前焦点的E元素。 -
E:lang(c), 匹配lang属性等于c的E元素。
示例：
p:first-child {
font-style: italic;
}
input[type=text]:focus {
color: #000;
background: #ffe;
}
input[type=text]:focus:hover {
background: #fff;
}
q:lang(sv) {
quotes: "\201D" "\201D" "\2019" "\2019";
}
CSS2.1中的伪元素
-
E:first-line, 匹配E元素的第一行。 -
E:first-letter, 匹配E元素的第一个字母。 -
E:before, 在E元素之前插入生成的内容。 -
E:after, 在E元素之后插入生成的内容。
示例：
p:first-line {
font-weight: bold;
color: #600;
}
.preamble:first-letter {
font-size: 1.5em;
font-weight: bold;
}
.cbb:before {
content: "";
display: block;
height: 17px;
width: 18px;
background: url(top.png) no-repeat 0 0;
margin: 0 0 0 -18px;
}
a:link:after {
content: " (" attr(href) ") ";
}
CSS3中与用户界面有关的伪类
-
E:enabled, 匹配表单中激活的元素。 -
E:disabled, 匹配表单中禁用的元素。 -
E:checked, 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素。 -
E::selection, 匹配用户当前选中的元素。
示例：
input[type="text"]:disabled { background: #ddd; }
CSS3中的结构性伪类
-
E:root, 匹配文档的根元素，对于HTML文档，就是HTML元素。 -
E:nth-child(n), 匹配其父元素的第n个子元素，第一个编号为1。 -
E:nth-last-child(n), 匹配其父元素的倒数第n个子元素，第一个编号为1。 -
E:nth-of-type(n), 与:nth-child()作用类似，但是仅匹配使用同种标签的元素。 -
E:nth-last-of-type(n), 与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素。 -
E:last-child, 匹配父元素的最后一个子元素，等同于:nth-last-child(1)。 -
E:first-of-type, 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1). -
E:last-of-type, 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)。 -
E:only-child, 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1). -
E:only-of-type, 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth:first-of-type(1):nth-last-of-type(1). -
E:empty, 匹配一个不包含任何子元素的元素，注意：文本节点也被看作子元素。
示例：
p:nth-child(3) { color: #f00; }
p:nth-child(odd) { color: #f00;}
p:nth-child(even) { color: #f00; }
p:nth-child(3n+0) { color: #f00; }
p:nth-child(3n) { color: #f00; }
tr:nth-child(2n+11) { background: #ff0; }
tr:nth-last-child(2) { background: #ff0; }
p:last-child { background: #ff0; }
p:only-child { background: #ff0; }
p:empty { background: #ff0; }
CSS3的反选伪类
E:not(s),匹配不符合当前选择器的任何元素
示例：
:not(p) {
border: 1px solid #ccc;
}
CSS3中的:target伪类
E:target,匹配文档中特定"id"点击后的效果
示例：
h2:target {
color: white;
background: #f60;
}
后代元素选择器和子元素选择器的区别
这里我们简单讨论下后代元素选择器和子元素选择器的区别
-
写法不一样：
后代元素选择器标识：空格
如：
ul li{ width:150px; },ul和li之间用空格隔开子元素选择器标识：>
如：
ul>li{ width:150px; },ul和li之间用>隔开 -
功能不一样
接着上例来说:后代选择器是选择ul包围的,所以元素中的所有li元素，包括子元素、孙元素、曾孙元素等等等。
子选择器仅仅选择ul包围的 子元素中的 li元素，不包括孙元素、曾孙元素等等等。
-
兼容性不一样：
后代选择器是所有浏览器都兼容的，都可使用。
子选择器在IE6、IE7、IE8中则是不被支持的选择器，各自bug！
二、CSS优先级
什么是CSS优先级？
CSS优先级是指CSS样式在浏览器中被解析的先后顺序。
样式的优先级
多重样式（Mutiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是多重样式的使用情况。
一般情况下，（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
例外：如果外部样式放在内部样式的后面，则外部样式将会覆盖内部样式。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
</head>
<body>
<h3>测试！</h3>
</body>
</html>
选择器的优先级
给不同的选择器分配不同的权值
| 选择器 | 内联样式（style=""） | id选择器 | 类选择器/属性选择器/伪类选择器 | 标签选择器 |
|---|---|---|---|---|
| 权重 | 1000 | 100 | 10 | 1 |
解释：
- 内联样式表的权值最高1000;
- id选择器权值100;
- 类选择器/属性选择器/伪类选择器权值10;
- HTML标签选择器权值为1.
示例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00; /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F; /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0;/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
结果：标签内的数据显示为蓝色。
CSS优先级法则
比较样式的优先级是，只需统计不同选择器的个数，然后与对应的权值相乘即可。根据结果便可得出优先级。
- 结果较大的优先级较高；
- 结果相同，则
后定义的优先级较高 - 创作者的优先级高于浏览者，网页编写者设置的CSS样式的优先权高于浏览器所设置的样式。
- 继承的CSS样式优先级低于后来指定的CSS样式
- 若样式值中含有
!important，则该值优先级最高
看到这里，有些同学是不是对!important有点迷惑呀为什么有了它，就优先级最高呐下面我们再来详细讲一讲!important~
三、!important知识点
!important简介
!important 是CSS1就定义的语法，作用是提高指定样式的应用优先权。
语法格式：{cssRule !important}，即写在定义的最后面，例如：box { color: red !important}
声明了!important的样式，具有最高的优先级，相当于写在最下面（最后定义）
IE 6.0下的!important
IE 6.0不完全支持!important
IE支持重定义中的!important，例如：
.yuanxin { color:#e00 !important; }
.yuanxin { color:#000; }
你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。
但不支持同一定义中的!important。例如：
.yuanxin { color: #e00 !important; color: #000; }
此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。
解释：
important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高，否则当含!important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为!important较低!
再举一个例子：
/*样式1*/
#a{width:100 !important;} /*有效*/
#a{width:50px;} /*无效*/
/*样式2*/
#a{width:100px !important; width:50px;} /*width:100px无效，width:50px 有效*/
因为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>
