1、样式优先级
(内联样式）Inline style > （内部样式）Internal style sheet > （外部样式）External style sheet > 浏览器默认样式
<p style="10px"> 页面内<style></style> 引用外部样式文件
2、 选择器优先级
以下列表逐级增加：
- 通用选择器（*） * ｛ ｝
- 元素(类型)选择器 p { ｝
- 类选择器 .class { }
- 属性选择器
- 伪类
- ID 选择器 #id { }
- 内联样式 <p style="10px">
3、!important
如，color:blue !important; 其覆盖CSS中任何其他的声明, 其与优先级无关， 使用 !important 不是一个好习惯，它改变了你样式表本来的级联规则，从而使其难以调试。
一些经验法则：
- 要优化考虑使用样式规则的优先级来解决问题而不是
!important - 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用
!important - 永远不要在全站范围的 css 上使用
!important - 永远不要在你的插件中使用
!important
4、样式继承性
重复的属性用优先级高的，不存在的直接继承过来，如
外部样式表
h3 { color:red; text-align:left; font-size:8pt; }
内部样式表
h3 { text-align:right; font-size:20pt; }
最终样式
/*从外部样式表继承*/ color:red; /*以下两个，内部样式表中重复存在，被其取代*/ text-align:right; font-size:20pt;
5、选择器 分组 和 层级嵌套
分组：减少重复的样式书写，一样的写在一起，用,隔开
/*重复的 color */ h1
{ color:green; } h2 { color:green; } p { color:green; }
分组写法
h1,h2,p { color:green; }
层级嵌套: 选择器内部的选择器的样式
先举个复杂的例子
定义了root-wrap样式的元素的form子元素下的定义了show-hide-body样式的元素下的定义了.scroll-contaier元素下的ol标签的所有li标签的样式
.root-wrap form .show-hide-body .scroll-contaier ol li { padding-top: 3px; padding-bottom: 5px; box-sizing: border-box; }
又如：为所有class="marked"元素内的p元素指定一个样式
p { color:blue; text-align:center; } .marked { background-color:red; } /*嵌套写法*/ .marked p { color:white; }
对应的html
<body> <p>这个段落是蓝色文本，居中对齐。</p> <!-- 先找到marked--> <div class="marked"> <!-- 再找到其子元素p--> <p>这个段落不是蓝色文本。</p> </div> <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。 </p> </body>
6、样式其他写法
元素同时写了两个样式
<p class="root-wrap actives">
下边.root-wrap和.actives之间没空格
.root-wrap.actives { border: 1px solid #00a6c9 ; }
又如元素选择器与类名结合
<img class="normal" src="logocss.gif" width="95" height="84" />
之间没空格
img.normal { height:auto; }
7、组合选择器
- 后代选取器(以空格分隔 div p { background-color:yellow; }) div下的所有p，可能不是直接子p元素
- 子元素选择器(以大于号分隔 div>p { background-color:yellow; }）div下直接子p元素
- 相邻兄弟选择器（以加号分隔div+p { background-color:yellow; }）
- 普通兄弟选择器（以破折号分隔div~p { background-color:yellow; }）
8、属性选择器
有属性的元素
[title]
{
color:blue;
}
<h1 title="Hello world">Hello world</h1>
指定属性值
[title=runoob]
{
border:5px solid green;
}
<img title="runoob" src="logo.png" width="270" height="50" />
包含指定值 |=
[lang|=en]
{
color:blue;
}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
指定表单元素
input[type="text"]
{
150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}