CSS Cascade [译]

CSS规则告诉HTML如何渲染元素 h2 { color: blue; margin: 1em; }

选择器"选择" HTML 中将被定义样式的元素. h2 选择器 { color: blue; margin: 1em; }

声明告诉浏览器如何定义元素的样式. h2 { color: blue; margin: 1em; 声明 }

属性是元素样式的各个角度 h2 { color: blue; 属性 margin: 1em; }

属性值是属性对应的具体样式 h2 { color: blue; margin: 1em; 属性值 }

HTML 文档可以应用三种样式

浏览器样式浏览器给所有页面应用的样式, 也称浏览器"默认"样式.

用户定义样式大部分现代浏览器允许用户在浏览器中应用他们自定义的样式

作者样式站点作者可以对HTML文档应用一个或多个样式

作者可以通过三种方法给 HTML文档添加样式

内联样式通过HTML代码的 style属性应用到元素使用style属性的内联样式 <body> <h2 style=“color: red;”> Heading here </h2> <p>

头部样式位于文档的头部的style元素里 <style>元素里的头部样式 <head> <title>Document title</titl <style type="text/css" medi h2 { color: blue; } </style>

外部样式通过link或者 @import实现使用link元素的外部样式 <title>Document title</titl <link rel="stylesheet" href=”my-styles.css” type=”text/css" media="screen” />

浏览器需要处理来自浏览器, 用户和作者样式的CSS规则.

浏览器还需要处理来自各种作者样式(外部, 头部和内联) 的CSS规则.

某些时候, 浏览器还需要处理冲突的CSS规则.

冲突指的是多个CSS规则作用在相同的元素和属性上. h2 { color: blue; } h2 { color: red; } 冲突的CSS 规则

冲突可以发生在不同类型样式的CSS规则上. 浏览器样式 h2 { color: blue; } 作者样式 h2 { color: red; }

冲突也可以发生在单个或多个作者样式的CSS规则里. 作者样式1 h2 { color: blue; } 作者样式2 h2 { color: red; } h2 { color: green; }

那哪条CSS规则 “赢”了呢?

需要四个步骤来决定哪条CSS规则 “赢了”(即被应用到HTML文档)

收集所有应用到元素和属性的来自于浏览器, 作者和用户的样式声明

比如, 找到所有符合以下条件的声明：元素 = h2 属性 = color

收集到的声明 h2 { color: black; } h2 { color: green; } h2 { color: blue; } #nav h2 { color: lime; } Browser style sheet User style sheet Author style sheets

如果中有声明的来源超过三个来源中的一个, 进入步骤二.

将收集到的声明按来源(浏览器, 作者, 用户样式) 和重要性 (normal 或 !important) 分类.

作者可以指定任何声明为 “!important” . h2 { color: red !important;} !important

“!important”声明可以覆盖普通声明 (普通声明指的是不包含 !important的声明).

优先级由低到高 1 浏览器样式 2 用户样式里的普通声明 3 作者样式里的普通声明 4 作者样式里的!important声明 5 用户样式里的!important声明

1. 浏览器样式 h2 { color: black; } 如果不存在其他声明, 浏览器声明获胜 Browser style sheet User style sheet Author style sheets

2. 普通用户样式 h2 { color: black; } Browser style sheet 普通用户声明胜过浏览器声明 h2 { color: green; } User style sheet Author style sheets

3. 普通作者样式 h2 { color: black; } Browser style sheet 普通作者声明胜过浏览器声明和普通用户声明 h2 { color: green; } h2 { color: blue; } User style sheet Author style sheets

4. !important作者样式 h2 { color: black; } Browser style sheet !important 作者声明胜过所有普通声明 h2 { color: green; } h2 { color: blue; } h2 { color: lime !important; } User style sheet Author style sheets

5. !important用户样式 h2 { color: black; } Browser style sheet !important 用户声明胜过 !important 作者声明和所有普通声明 h2 { color: green; } h2 { color: red !important;} h2 { color: blue; } h2 { color: lime !important; } User style sheet Author style sheets

那如果两条声明的来源或重要性相同，该怎么办呢？

有两条匹配的声明 h2 { color: black; } h2 { color: green; } Browser style sheet User style sheet 两条来源和重要性相同的声明 h2 { color: blue; } h2 { color: lime; } Author style sheets

如果声明的来源或重要性相同, 进入步骤三.

如果声明的来源和重要性都相同，需要对声明的选择器进行评分，来决定是哪条声明“赢了”.

选择器 #nav h2 { color: blue; } h2.intro { color: red; } 选择器

四个分数连在一起(像链条一样) 得到最终的评分. a,b,c,d

得分取决于选择器的优先级.

那优先级是如何计算的？

A. 是不是内联样式? <h2 style=“color: red;”> This is a heading a = 1 x </h2> inline styles b = 0 x ID<p> c = 0 x classes Here is a paragraph of d = 0 x element Specificity = 1,0,0,0

B. 统计选择器中ID的数量. #nav{ color: red; } a = 0 x inline styles b = 1 x ID c = 0 x classes d = 0 x element Specificity = 0,1,0,0

C. 统计class，属性和伪类的数量. .main { color: red; } a = 0 x inline styles b = 0 x ID c = 1 x classes d = 0 x element Specificity = 0,0,1,0

D. 统计元素名和伪元素的数量. h2 { color: red; } a = 0 x inline styles b = 0 x ID c = 0 x classes d = 1 x element Specificity = 0,0,0,1

“A” 始终优先于“B”, “B”始终优先于“C”, “C”始终优先于“D”.

不管选择器中有多少个ID , 只要一个内联样式就可以轻松获胜. (除非ID的声明中使用了!important)

External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) #one #two #three #four #five #six #seven #eight #nine #ten { color: green; } <h2 style=“color: purple;”> 高亮的样式胜出因为优先级 1,0,0,0 胜过0,10,0,0

不管选择器中有多少个class , 只要一个ID就可以轻松获胜.

External style sheets and header styles (Author styles) .one .two .three .four .five .six .seven .eight .nine .ten { color: green; } #nav { color: lime; } 高亮的样式胜出因为优先级 0,1,0,0 胜过 0,0,10,0

不管选择器中有多少个元素名, 只要一个class就可以轻松获胜.

External style sheets and header styles (Author styles) div div div div div form fieldset div label span { color: green; } .intro { color: lime; } 高亮的样式胜出因为优先级 0,0,1,0 胜过 0,0,0,10

ID和元素 #nav h2 { color: red; } a = 0 x inline styles b = 1 x ID (#nav) c = 0 x classes d = 1 x element (h2) Specificity = 0,1,0,1

元素和class h2.intro { color: red; } a = 0 x inline styles b = 0 x ID c = 1 x classes (.intro) d = 1 x element (h2) Specificity = 0,0,1,1

ID, 元素和伪类 #navul li a:hover { color: a = 0 x inline styles b = 1 x ID (#nav) c = 1 x pseudo-class (:hover) d = 3 x elements (ul, li, a) Specificity = 0,1,1,3

元素和伪元素 p:first-line { color: green a = 0 x inline styles b = 0 x ID c = 0 x classes d = 2 x element (p) and pseudo-element (:first-line) Specificity = 0,0,0,2

元素和属性选择器 h2[title=“intro”] { color: a = 0 x inline styles b = 0 x ID c = 1 x attribute selector ([title=“intro”]) d = 1 x element (h2) Specificity = 0,0,1,1

如果还没分出胜负？

优先级相同的选择器 #nav h2 { color: red; } #nav h2 { color: green; } 优先级 = 0,1,0,1

如果还没分出胜负, 进入步骤四.

如果两条声明有相同的重要性、来源和优先级, 则后面的声明赢.

同等的声明 #nav h2 { color: green; } #nav h2 { color: red; } 第二条声明获胜，因为他写在第一条后面.

习题一浏览器, 用户, 作者

Browser style sheet User style sheet External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: black; } h2 { color: green; }

Browser style sheet User style sheet h2 { color: black; } h2 { color: green; } 普通用户声明从来源上胜过浏览器声明 External style sheets and header styles (Author styles) HTML document with inline styles (Author styles)

Browser style sheet User style sheet External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: black; } h2 { color: green; } h2 { color: blue; }

Browser style sheet User style sheet External style sheets and header styles (Author styles) h2 { color: black; } h2 { color: green; } h2 { color: blue; } 作者声明从来源上胜过浏览器和用户声明 HTML document with inline styles (Author styles)

Browser style sheet User style sheet External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: black; } h2 { color: green; } h2 { color: blue; } <h2 style=“color: purple;”>

Browser style sheet h2 { color: black; } User style sheet h2 { color: 普通内联声明胜过普通外部和头部声明，因为优先级 1,0,0,0 胜过0,0,0,1 External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: blue; } <h2 style=“color: purple;”>

Browser style sheet User style sheet External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: black; } h2 { color: green; } h2 { color: blue; } h2 { color: lime !important; } <h2 style=“color: purple;”>

Browser style sheet User style sheet h2 { color: black; } h2 { color: green; } !important 作者样式胜过普通浏览器、用户和作者样式 External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: blue; } h2 { color: lime !important; } <h2 style=“color: purple;”>

Browser style sheet User style sheet External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: black; } h2 { color: green; } h2 { color: blue; } h2 { color: lime !important; } <h2 style=“color: purple !important;”>

Browser style sheet h2 { color: black; } User style sheet !important 内联作者声明胜过 !important 外部作者声明和头部声明，因为优先级 1,0,0,0 胜过 0,0,0,1 External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: blue; } h2 { color: lime !important; } <h2 style=“color: purple !important;”>

Browser style sheet User style sheet External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: black; } h2 { color: green; } h2 { color: gray !important; } h2 { color: blue; } h2 { color: lime !important; } <h2 style=“color: purple !important;”>

Browser style sheet h2 { color: black; !important 用户声明胜过 !important 作者声明 (不管他们是外部、头部还是内联) User style sheet External style sheets and header styles (Author styles) HTML document with inline styles (Author styles) h2 { color: green; } h2 { color: gray !important; } h2 { color: blue; } h2 { color: lime !important; } <h2 style=“color: purple !important;”>

习题二作者的外部, 头部和内联CSS

External style sheets and header styles (Author styles) h2.news { color: #eee; } h2 { color: blue; }

高亮的声明胜出，因为优先级 0,0,1,1 胜过 0,0,0,1 External style sheets and header styles (Author styles) h2.news { color: #eee; } h2 { color: blue; }

External style sheets and header styles (Author styles) h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; }

高亮的声明和第一个声明优先级相同(0,0,1,1). 但是他写在后面，所以他胜出! External style sheets and header styles (Author styles) h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; }

External style sheets and header styles (Author styles) #nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; }

高亮的选择器胜出, 因为优先级 0,1,0,1 胜过 0,0,1,1 和0,0,0,1 External style sheets and header styles (Author styles) #nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; }

External style sheets and header styles (Author styles) #nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } div#nav h2 { color: lime; }

高亮的选择器胜出, 因为优先级 0,1,0,2 胜过 0,1,0,1 和 0,0,1,1 和0,0,0,1 External style sheets and header styles (Author styles) #nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } div#nav h2 { color: lime; }

CSS Cascade [译]

Recommended

Recommended

More Related Content

Similar to CSS Cascade [译]

Similar to CSS Cascade [译] (17)

CSS Cascade [译]