ShadowSky

[1位重要标志位] > [4位特殊性标志] > 声明先后顺序

注：样式表比html后载入

①重要声明（!important）

虽然按照顺序应该是使用后声明的绿色，但是因为!important的缘故，所以最后使用的却是蓝色。

②正常声明

㈠创作人员正常声明
1.内联样式
在html文档的元素中直接插入样式的

1. <div style=”display:none;”></div>

在ie6中此优先级与id选择器同级

2.id选择器
应用于对应id的元素，css中用“#”后跟id来标记。

1. #header{ display:none;}
2. <div id=”header“></div>

3.类（属性，伪类）选择器

1.类选择器
应用于对应class的元素，css中用“.”后跟class名来标记。

1. .header{display:none;}
2. <div class=”header“></div>

2.属性选择器
属性选择器应用于对应class的元素，css中用“[]”标记中html元素属性名来标记。

1. div[title]{
2.  display:none;
3. }
4. <div title=”any”></div>

3.伪类选择器
LVHA伪类,样式按LVHA优先级顺序从右至左覆盖。所以要注意一下这4个伪类的声明顺序，不同的顺序会产生不同的效果。
a:link - 默认链接样式
a:visited - 已访问链接样式
a:hover - 鼠标悬停样式
a:active - 鼠标点击样式

4.元素（伪元素）选择器

1.元素选择器
应用于所有对应的html标签，css中直接使用html元素标记

1. div{display:none;}
2. <div></div><div></div>

2.伪元素选择器
:first-letter - 首字母样式
:first-line - 首行样式

5.通配符选择器
应用于所有匹配的样式，类似模糊匹配，*号就是什么都可以啦。

1. div *{
2.  display:none;
3. }
4. <div><div></div><span></span></div>

6.继承样式和结合符

1.继承样式

1. p会继承div设置的样式，但没有权重，任何方式给p定义的样式都可以轻易覆盖继承样式
2. div{color:red;}
3. <div><p></p></div>

2.结合符（combinator）

1.后代选择器（descendant selector/上下文选择器contextual selector）
后代结合符（descendant combinator）：空格
空格前后的元素是后代关系。

树结构的分支选择器。
（可一直嵌套下去，如：div p span）

1. div span{
2.  display:none;
3. }
4. <div><p><span></span></p></div><span></span><div><em></em></div>

空格的左右两边不一定是子元素这样的绝对父子关系；而是父亲和子孙关系，即可以隔N代遗传。
如果有相似两代的话当然有两个选择最接近的一代。如：
两层span，只匹配最接近div的那个span。

1. div span{
2.  display:none;
3. }
4. <div><p><span><h1><span></span></h1></span></p></div>

2.子（元素）选择器（child selector）
子结合符：大于号（child combinator）
大于前后的元素必须是父子关系。

1. div > span {
2.  display:none;
3. }
4. <div><span></span></div><div><em><span></span></em></div>

3.相邻兄弟选择器（adjacentsibling selector）
相邻兄弟结合符（adjacentsibling combinator）：加号
加号前后的元素必须是同级兄弟关系。

1. li + li{
2.  display:none;
3. }
4. <ol><li></li><li></li><li></li></ol>

㈡读者正常声明

③用户代理（User agent）
一般指游览器。如：
游览器对a元素有默认声明，为蓝色加下划线。

[转]http://www.28star.com/blog/2008/06/06/css-priority.html （有修改）

P.S. 事实上一般不会遇到太过复杂的情况，按照我们常用的简单地来记就是：

!important > 内联定义 > id > class > 元素 > 复合结构（无定义复合>父子复合>兄弟复合）

Tags: css, 随手笔记

分类：Web | 阅读(3,126 次) | trackback | 回复