我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。
今日学习目标
昨天对于 CSS 有一个基础了解，今天准备对于 CSS 选择器有一个完整了解，又是适合学习的一天，加油，小又又！！！！
CSS 选择器
7 种基础的选择器
ID 选择器， 如
#id{}, 为标有特定id的HTML元素指定特定的样式类选择器， 如
.class{}, 为一组HTML元素指定特定的样式属性选择器， 如
a[href="segmentfault.com"]{}伪类选择器， 如
:hover{}伪元素选择器， 如
::before{}标签选择器， 如
span{}通配选择器， 如
*{}
3 种组合的选择器
后代选择符：
.father .child{}子选择符：
.father > .child{}相邻选择符:
.bro1 + .bro2{}
注意事项！！！
ID属性不要以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。类名的第一个字符不能使用数字！它无法在Mozilla/Firefox中起作用。
CSS 的继承性
- 最近的祖先样式比其他祖先样式优先级高
直接样式比祖先样式优先级高
CSS 优先规则1
最近的祖先样式比其他祖先样式优先级高。
CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构：
<div>
<p></p>
</div>
如果 <div> 有个属性 color: red，则这个属性将被 <p> 继承，即 <p> 也拥有属性 color: red。
由上可见，当网页比较复杂， HTML 结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
CSS 优先规则2
直接样式比祖先样式优先级高。
如果我们把一个标签从祖先那里继承来的，而自身没有的属性叫做祖先样式，那么直接样式就是一个标签直接拥有的属性。
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div class="son" style="color: blue"></div>
</div>
选择器的优先级
- 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- 计算选择符中
a、b、c种类型的个数来统一判断优先级 - 有
!important的属性拥有最高优先级
CSS 优先规则3
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
!important 规则例外~~
// HTML
<div class="content-class" id="content-id" style="color: black"></div>
// CSS
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
最终的 color 为 black，因为内联样式比其他选择器的优先级高。
CSS 优先规则4
计算选择符中a、b、c种类型的个数来统一判断优先级。
- 计算选择符中
ID 选择器的个数（a）， - 计算选择符中
类选择器、属性选择器以及伪类选择器的个数之和（b）， - 计算选择符中
标签选择器和伪元素选择器的个数之和（c）。
按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。
若最后两个的选择符中 a、b、c 都相等，则按照就近原则来判断。
// HTML
<div id="con-id">
<span class="con-span"></span>
</div>
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
由规则 4 可见，<span> 的 color 为 red。
这一段看着好麻烦
如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢？
这与样式表在 HTML 文件中所处的位置有关。
样式被应用的位置越在下面，则优先级越高，其实这仍然可以用规则 4 来解释。
// HTML
<link rel="stylesheet" type="text/css" href="style-link.css">
<style type="text/css">
@import url(style-import.css);
div {
background: blue;
}
</style>
<div></div>
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
从顺序上看，内部样式在最下面，被最晚引用，所以 <div> 的背景色为 blue。
上面代码中，@import 语句必须出现在内部样式之前，否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件。
CSS 优先规则5
CSS 还提供了一种可以完全忽略以上规则的方法，当一定、必须确保某一个特定的属性要显示时，可以使用这个技术。
属性后使用了 !important 的拥有最高优先级。
若同时插有 !important，则再利用规则 3、4 判断优先级。
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
虽然 .father .son 拥有更高的权值，但选择器 p 中的 background 属性使用了 !important， 所以 <p> 的 background 为 red。
建议
Always要优化考虑使用样式规则的优先级来解决问题而不是!importantOnly只在需要覆盖全站或外部css（例如引用的ExtJs或者YUI）的特定页面中使用!importantNever永远不要在全站范围的css上使用!importantNever永远不要在你的插件中使用!important
错误说法
在学习过程中，可能发现给选择器加权值的说法。
即 内联样式表的权值最高 1000， ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。
这种说法其实是有问题的!!!!
比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。
错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。
还是拿刚刚的例子说明~~~
11 个类选择器组成的选择器的总权值为110，但因为11个均为类选择器，所以其实总权值最多不能超过100， 你可以理解为99.99，所以最终应用后者`样式。
总结
- A 选择器都有一个权值，权值越大越优先；
- B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式
- D 继承的CSS 样式不如后来指定的CSS 样式；
- E 在同一组属性设置中标有
!important规则的优先级最大
今日学习总结
- css选择器主要有基础选择器(7)和组合选择器(10)。
- 一个标签的样式受到的影响可能来自周围的标签，也可能来自其自身。
- 要了解 CSS 样式继承性
- 要了解 CSS 样式的不同选择器的权重优先级
今日心情
今天对于 CSS 选择器有了一个基础了解，希望明天能对于属性声明这块更多的学习一下~~~
本文使用 mdnice 排版
