Post on 25-Jun-2015
CSSCASCADE
[ 译 ]
CSS 规则的背景资料
CSS 规则 告诉 HTML 如何渲染元素
h2{
color: blue;margin: 1em;
}
选择器 " 选择 " HTML 中将 被定义样式的元素 .
h2 选择器{
color: blue;margin: 1em;
}
声明 告诉浏览器
如何定义元素的样式 .
}
color: blue;margin: 1em;
声明
h2{
属性 color: blue;margin: 1em;
}
属性 是元素样式的各个角度
h2{
属性值 是属性对应的具体样式
}
color: blue;margin: 1em;
属性值
h2{
样式表的类型
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" medih2 { 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 规则 .
“ 冲突”是什么意思 ?
冲突指的是多个 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
收集到的声明
Browser style sheet
User style sheet
Author style sheets
h2 { color: black; }
h2 { color: green; }
h2 { color: blue; }#nav h2 { color: lime; }
如果中有声明的来源超过三个来源中的一个 , 进入步骤二 .
第二步
将收集到的声明按来源 ( 浏览器 , 作者 , 用户样式 ) 和重要性
(normal 或 !important) 分类 .
什么是!important?
作者可以指定任何声明为“!important” .
h2 { color: red !important;}
!important
“!important” 声明可以覆盖普通声明
( 普通声明指的是不包含!important 的声明 ).
那么 , 声明如何分类 ?
优先级由低到高1 浏览器样式2 用户样式里的普通声明3 作者样式里的普通声明4 作者样式里的 !important 声明5 用户样式里的 !important 声明
1. 浏览器样式
Browser style sheet
User style sheet
Author style sheets
h2 { color: black; }
如果不存在其他声明 ,浏览器声明获胜
2. 普通用户样式
Browser style sheet h2 { color: black; }
普通用户声明胜过浏览器声明
User style sheet
Author style sheets
h2 { color: green; }
Browser style sheet h2 { color: black; }
普通作者声明胜过浏览器声明和普通用户声明
User style sheet
Author style sheets
h2 { color: green; }
h2 { color: blue; }
3. 普通作者样式
Browser style sheet h2 { color: black; }
!important 作者声明胜过所有普通声明
User style sheet
Author style sheets
h2 { color: green; }
h2 { color: blue; }h2 { color: lime !important; }
4. !important 作者样式
Browser style sheet h2 { color: black; }
!important 用户声明胜过 !important 作者声明和所有普通声明
User style sheet
Author style sheets
h2 { color: green; }h2 { color: red !important;}
h2 { color: blue; }h2 { color: lime !important; }
5. !important 用户样式
那如果两条声明的来源或重要性相同，该怎么办呢？
有两条匹配的声明
Browser style sheet
User style sheet
h2 { color: black; }
h2 { color: green; }
两条来源和重要性相同的声明
Author style sheets h2 { color: blue; }h2 { color: lime; }
如果声明的来源或重要性相同 , 进入步骤三 .
第三步
如果声明的来源和重要性都相同，需要对声明的选择器进行评分，
来决定是哪条声明“赢了” .
选择器
#nav h2 { color: blue; }h2.intro { color: red; }
选择器
四个分数连在一起 ( 像链条一样 ) 得到最终的评分 .
a,b,c,d
得分取决于选择器的优先级 .
那优先级是如何计算的？
inline styles
A. 是不是内联样式 ?
<h2 style=“color: red;”>This is a heading
a = 1 x </h2>b = 0 x ID<p>c = 0 x classes Here is a paragraph of
Specificity = 1,0,0,0d = 0 x element
B. 统计选择器中 ID 的数量 .
#nav { color: red; }
a = 0 x inline stylesb = 1 x IDc = 0 x classesd = 0 x elementSpecificity = 0,1,0,0
C. 统计 class ，属性 和伪类的数量 .
.main { color: red; }
a = 0 x inline stylesb = 0 x IDc = 1 x classesd = 0 x elementSpecificity = 0,0,1,0
D. 统计元素名和伪元素的数量 .
h2 { color: red; }
a = 0 x inline stylesb = 0 x IDc = 0 x classesd = 1 x elementSpecificity = 0,0,0,1
优先级连接笔记
“A” 始终优先于“ B”, “B” 始终优先于“ C”, “C” 始终优先于“ D”.
不管选择器中有多少个 ID , 只要一个内联样式就可以轻松获胜 .
( 除非 ID 的声明中使用了 !important)
External style sheetsand header styles
(Author styles)
HTML document withinline 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 sheetsand 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 sheetsand header styles
(Author styles)
div div div div div formfieldset 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 stylesb = 1 x ID (#nav)c = 0 x classesd = 1 x element (h2)Specificity = 0,1,0,1
元素和 class
h2.intro { color: red; }
a = 0 x inline stylesb = 0 x IDc = 1 x classes (.intro)d = 1 x element (h2)Specificity = 0,0,1,1
ID, 元素和伪类
#nav ul li a:hover { color:
a = 0 x inline stylesb = 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 stylesb = 0 x IDc = 0 x classesd = 2 x element (p) and pseudo-element (:first-line)Specificity = 0,0,0,2
元素和属性选择器
h2[title=“intro”] { color:
a = 0 x inline stylesb = 0 x IDc = 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; }
第二条声明获胜，因为他写在第一条后面 .
现在…来些猜谜游戏
习题一浏览器 , 用户 , 作者
Part 1: 哪个赢了 ?
Browser style sheet
User style sheet
External style sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: black; }
h2 { color: green; }
External style sheets
Browser style sheet
User style sheet
h2 { color: black; }
h2 { color: green; }
普通用户声明从来源上胜过浏览器声明
and header styles(Author styles)
HTML document withinline styles
(Author styles)
Part 2: 哪个赢了 ?
Browser style sheet
User style sheet
External style sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: black; }
h2 { color: green; }
h2 { color: blue; }
HTML document with
Browser style sheet
User style sheet
External style sheetsand header styles
(Author styles)
h2 { color: black; }
h2 { color: green; }
h2 { color: blue; }
作者声明从来源上胜过浏览器和用户声明
inline styles(Author styles)
Part 3: 哪个赢了 ?
Browser style sheet
User style sheet
External style sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: black; }
h2 { color: green; }
h2 { color: blue; }
<h2 style=“color: purple;”>
User style sheet h2 { color:
Browser style sheet h2 { color: black; }
普通内联声明胜过普通外部和头部声明，因为优先级 1,0,0,0 胜过 0,0,0,1
External style sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: blue; }
<h2 style=“color: purple;”>
Part 4: 哪个赢了 ?
Browser style sheet
User style sheet
External style sheetsand header styles
(Author styles)
HTML document withinline 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 sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: blue; }h2 { color: lime !important; }
<h2 style=“color: purple;”>
Part 5: 哪个赢了 ?
Browser style sheet
User style sheet
External style sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: black; }
h2 { color: green; }
h2 { color: blue; }h2 { color: lime !important; }
<h2 style=“color: purple!important;”>
User style sheet
Browser style sheet h2 { color: black; }
!important 内联作者声明胜过 !important 外部作者声明和头部声明，因为优先级 1,0,0,0 胜过 0,0,0,1
External style sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: blue; }h2 { color: lime !important; }
<h2 style=“color: purple!important;”>
Part 6: 哪个赢了 ?
Browser style sheet
User style sheet
External style sheetsand header styles
(Author styles)
HTML document withinline 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 sheetsand header styles
(Author styles)
HTML document withinline styles
(Author styles)
h2 { color: green; }h2 { color: gray !important; }
h2 { color: blue; }h2 { color: lime !important; }
<h2 style=“color: purple!important;”>
习题二作者的外部 , 头部和内联 CSS
Part 1: 哪个赢了 ?
External style sheetsand header styles
(Author styles)
h2.news { color: #eee; }h2 { color: blue; }
高亮的声明胜出，因为优先级0,0,1,1 胜过 0,0,0,1
External style sheetsand header styles
(Author styles)
h2.news { color: #eee; }h2 { color: blue; }
Part 2: 哪个赢了 ?
External style sheetsand header styles
(Author styles)
h2.news { color: #eee; }h2 { color: blue; }h2.news { color: green; }
高亮的声明和第一个声明优先级相同 (0,0,1,1).但是他写在后面，所以他胜出 !
External style sheetsand header styles
(Author styles)
h2.news { color: #eee; }h2 { color: blue; }h2.news { color: green; }
Part 3: 哪个赢了 ?
External style sheetsand 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 sheetsand header styles
(Author styles)
#nav h2 { color: lime; }h2.news { color: #eee; }h2 { color: blue; }h2.news { color: green; }
Part 4: 哪个赢了 ?
External style sheetsand header styles
(Author styles)
#nav h2 { color: lime; }h2.news { color: #eee; }h2 { color: blue; }h2.news { color: green; }div#nav h2 { color: lime; }
External style sheetsand 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
搞定 !