## CSS优先级和层叠 > CSS是网页的装修工，选择器就是我们需要装修工装修的位置，而如果同时两个人同时对一个位置提出了两种装修需求，我们到底听谁的呀？ ~~~html <div id="jack" class="tom"> <br> </div> ~~~ ~~~css .tom{ background-color: blue; } #jack{ background-color: red; } ~~~ > 类选择器和ID选择器同时选择到了同一个元素，浏览器最终听了ID选择器的。 > 为什么会这样呢？我们要引入优先级的概念。 ### 选择器优先级 > 我们将优先级分为四个等级。 |级别|选择器|权重| |---|---|---| |A|行内样式|1000| |B|ID选择器|100| |C|类、伪类和属性选择器|10| |D|标签选择器和伪元素选择器|1|  ### 层叠 > 选择器有优先级，我们看到当两个选择器选择同样元素并且同样的样式的时候，会根据优先级来确定样式。 > 而如果两个选择器选择同一元素使用不同的样式属性呢？ CSS有层叠机制 ~~~html <div id="jack" class="tom"> <p>我是岳云鹏！</p> </div> ~~~ ~~~css .tom{ background-color: blue; color: green; } #jack{ background-color: red; } ~~~ ### 继承 CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。 ~~~html <p> CSS样式表<em>继承特性</em>的演示代码 </p> ~~~ ~~~css p { color:red; } ~~~ > 这个时候p标签中的所有文本包括em标签中的文本都会变成红色。 >当然也不是所有的css属性都会被子类继承，例如border属性。继续利用上面的一段代码。我们为p元素添加border属性。 ~~~css p { border: 1px solid red; } ~~~ [可继承元素与部可继承元素整理](http://blog.csdn.net/hicoldcat/article/details/64443280)