CSS学习笔记-CSS的优先级+继承性（四）

css继承特性

CSS继承性
HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。
HTML中，是其他元素的容器，是其他元素的最外层元素，所以元素中定义的样式将影响其他所有元素的显示格式。
具有继承的CSS属性
文本相关的属性是继承的
text-align、
color、
text-indent、
font-family、
font-size
font-style、
font-weight、
letter-spacing、
word-spacing
text-transform、
line-height等

css优先级

单个选择器优先级

!important > 行内样式 > ID选择器 > Class选择器 >元素选择器
定义!important的选择器，优先级最高，但IE6不支持。
例如：h1{color:#ff0000 !important;}

<style type="text/css">
             /*（1）行内样式优先级最高 */
#title{ color:#0000ff;}  /*（2）ID选择器比Class选择器优先级高 */
.title{ color:#00ff00; }  /*（3）Class选择器比元素选择器优先级高 */
h1{ color:#ff0000; }     /*（4）元素选择器，优先级最低 */
style>
<h1 class="title" id="title" style="color:#999900">人社部官员h1>

组合选择器的优先级是如何计算的？

一般而言，选择器指向的越准确，它的优先级就越高。通常我们用1表示标签选择器的优先级，用10表示class选择器的优先级，用100标示ID选择器的优先级，用1000表示行内样式。
举例：
div.box span{ } 优先级为12
.box span{ } 优先级为11，优先级小于上边

编写简洁、高效的原则

概述
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找。
编写高效CSS的原则
不要在ID选择器前使用标签名。
例如：div#box 简写形式 #box
不要再class选择器前使用标签名
例如：div.box 简写形式 .box
尽量少使用层级关系
例如：.box .news .title h1 简写形式 .title h1
使用class代替层级关系
例如：.box .news .title 简写形式 .title