当创建的样式表越来越复杂时，一个标签的样式将会受到越来越多的影响，这种影响可能来自周围的标签，也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。
CSS 的继承性
CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构：
<div>
<p></p></div>
如果 <div> 有个属性 color: red，则这个属性将被 <p> 继承，即 <p> 也拥有属性 color: red。
由上可见，当网页比较复杂， HTML 结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。影响的规则是：
CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。
例1：
<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div></div>
如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式"，那么"直接样式"就是一个标签直接拥有的属性。又有如下规则：
CSS 优先规则2："直接样式"比"祖先样式"优先级高。
例2：
<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">
<div class="son" style="color: blue"></div></div>
选择器的优先级
上面讨论了一个标签从祖先继承来的属性，现在讨论标签自有的属性。在讨论 CSS 优先级之前，先说说 CSS 7 种基础的选择器：
ID 选择器， 如 #id{}
类选择器， 如 .class{}
属性选择器， 如 a[href="segmentfault.com"]{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 *{}
CSS 优先规则3：优先级关系：内联样式 >ID 选择器 >类选择器 = 属性选择器 = 伪类选择器 >标签选择器 = 伪元素选择器
例3：
// 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 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：
后代选择符： .father .child{}
子选择符： .father >.child{}
相邻选择符: .bro1 + .bro2{}
当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：
CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
例4：
// 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 来解释。
例5：
// 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.cssdiv {
background: lime}// style-import.cssdiv {
background: grey}
从顺序上看，内部样式在最下面，被最晚引用，所以 <div>的背景色为 blue。
上面代码中，@import 语句必须出现在内部样式之前，否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件，原因见另一篇博客：CSS 引入方式。
CSS 还提供了一种可以完全忽略以上规则的方法，当你一定、必须确保某一个特定的属性要显示时，可以使用这个技术。
CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。
例6：
// HTML<div class="father"><p class="son"></p></div>// CSSp {
background: red !important}.father .son {
background: blue}
虽然 .father .son 拥有更高的权值，但选择器 p 中的 background 属性被插入了 !important， 所以 <p>的 background 为 red。
错误的说法
在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 >100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。
css2.1中，颜色的表示方法有三种：（1）单词；（2）rgb表示法（十进制表示法）；（3）十六进制表示法。
能够用英语单词来表述的颜色，都是简单颜色。
红色：background-color: red
红色：background-color：rgb（255,0,0）；
rgb（red、green、blue）表示三原色“红”“绿”“蓝”。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色。
用逗号隔开r，g，b的值，每个值的取值范围是0~255，一共256个值。
如果此项的值是255，那么就说明是纯色：
绿色：background-color：rgb（0,255，0）
蓝色：background-color：rgb（0,0,255）
黑色：background-color：rgb（0，0，0）
白色：background-color：rgb（255,255,255）
颜色可以叠加，比如黄色就是红色和黄色的叠加：
黄色：background-color：rgb（255,255,0）
紫色：background-color：rgb（255,0，255）
青色：background-color：rgb（0,255,255）
红色：background-color：#ff0000；
所有用#开头的值，都是16进制的。
#ff0000（ff表示r，00表示g，00表示b）
16进制表示法和rgb类似，也是两位两位的看，但是没有逗号隔开。
上述红色表示法中：ff就是10进制的255,00就是十进制的0，所以#ff0000相当于（255,0,0）
十六进制对照表：
任何一种十六进制表示法都能够换算成rgb表示法。也就是说，两个表示法能表示的颜色数量一样多，十六进制能够简化成3位，所有#rrggbb的形式，都可以写成#rgb；
比如，上述的红色可以写成background-color：#f00；
但是，如果要采用简化的方法，必须满足rrggbb格式才行。
几个特殊的要记住：
黑：#000
白：#fff
红：#f00
灰：#333
深灰：#222
浅灰：#ccc
background-image属性用于给盒子加上背景图片：
background-image：url（images/1.jpg）
url（）表示网址。、
images/1.jpg就是相对路径。
背景会默认循环，平铺满整个盒子，padding的区域也会有背景图。
background-repeat属性用来设置背景图是否重复以及重复方式。
“repeat”表示“重复”。
默认为铺满，不用设置。
不重复：background-repeat：no-repeat；
横向重复：background-repeat：repeat-x；
纵向重复：background-repeat：repeat-y；
background-position：背景定位属性。
格式：background-position：向右移动量（100px） 向下移动量（200px）
向上向左移只需把移动量改成负数即可。
css精灵又叫“css雪碧”技术，是一种css图像拼合技术，该方法是将小图标和图像合并到一张图上，然后利用css背景定位来显示需要显示的图片部分。
css精灵的优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。
background-position：描述左右的词 描述上下的词；
比如：background-position：right bottom：（右下角）
background-position：center center；（居中）
背景固定属性。
格式：background-attachment：fixed；
背景就会被固定住，不会被滚动条滚走。
background属性和border一样，是一个综合属性：
background：red url（1.jpg） no-repeat 100px 100px fixed；
等价于：
background-color：red；
background-image：url（1.jpg）；
background-repeat：no-repeat；
background-position：100px 100px；
background-attachment：fixed；
可以任意省略部分：
background：red；
在制作页面的时候我们经常需要设置字体颜色或者背景颜色，丰富多彩的颜色能够让页面呈现更好的效果，在网站中用到颜色的地方也很多，文字颜色，背景颜色，边框颜色等都需要用到。
在css中表示颜色的方法主要有以下几种。
1. 关键字颜色
属性值是颜色的名称。
例如：
div{
color:red
}
2. 十六进制
十六进制表示颜色的原理是利用光的三原色：红色，绿色，蓝色。利用这三种颜色就能组合出很多颜色，比如红色光和绿色光就可以组合成黄色，三种颜色的光可以组成白色，没有光的时候就是黑色。
下图为光色三原色：
请点击输入图片描述
十六进制颜色是由#加六位的十六进制表示的，范围是00到ff，前两位表示红色，中间两位表示绿色，最后两位表示蓝色。
例如：
#ff0000表示红色，这个色值包含最大数量的红色，但是没有绿色和蓝色，所以是红色。
#00ff00表示绿色，这个色值包含最大数量的绿色，但是没有红色和蓝色，所以是绿色。
#0000ff表示蓝色，这个色值包含最大数量的蓝色，但是没有红色和蓝色，所以是蓝色。
#000000表示黑色，这个色值没有颜色，表示没有光，所以是黑色。
#ffffff表示白色，这个色值包含最大数量的红色绿色和蓝色，组合到一起是白色。
十六进制的00到ff，是十进制的0到255，因此每种颜色都有256种取值，能够组合出来的颜色就是：256*256*256=16777216，这么多种色值足够可以让我们的页面变的丰富多彩。
这里的三原色为什么是红色、绿色、蓝色，而和我们学美术的时候的红色、黄色、蓝色不一样呢?因为学美术的时候用的是颜料的三原色，颜料的三原色利用的是光的反射原理。
3. RGB
RGB表示颜色的方式原理和十六进制是一样的，是利用光的三原色：红色，绿色，蓝色。
R表示red，红色。
G表示green，绿色。
B表示blue，蓝色。
取值从0到255，也可以是百分数。
rgb(red, green, blue)
例如：
rgb(255,0,0)或者rgb(100%,0,0)表示红色，
rgb(0,255,0)或者rgb(0,100%,0)表示绿色，
rgb(0,0,255)或者rgb(0,0,100%)表示蓝色，
rgb(0,0,0)或者rgb(0,,0,0)表示黑色，
rgb(255,255,255)或者rgb(100%100%,100%)表示白色，
4. HSL
HSL表示颜色的方法是通过色相，饱和度和亮度表示的。其中H是Hue色相，S是Saturation饱和度，L是Lightness亮度。
下图为HSL颜色模式：
请点击输入图片描述
H：色相。就是颜色名称。取值为是0到360。
S：饱和度。是色彩的纯度，取值是0%到100%。
L：亮度。取值为是0%到100%。
hsl(hue, saturation, lightness)
例如：
div{
width: 100px
height: 100px
background: hsl(100, 80%, 50%)
}
5. RGBA
RGBA颜色表示形式只是比RGB多了一个A。A表示Alpha透明度。取值是0到1.
rgba(red, green, blue, alpha)
例如：
div{
width: 100px
height: 100px
background: rgba(255, 0, 0, 0.5)
}
效果图：
6. HSLA
HSLA颜色表示形式只是比HSL多了一个A。A表示Alpha透明度。取值是0到1.
hsla(hue, saturation, lightness, alpha)
例如：
div{
width: 100px
height: 100px
background:hsla(100, 80%, 50%,0.8)
}
