CSS Mastery - Advanced Web Standards 是一本好书，虽然写了挺久的CSS了，却没有时间去正式的学习一下。今天借着小半天的空闲时间，看了一下“关于CSS优先级(Specificity)的解释”的章节。
在CSS编写中，优先级是一个非常有用的技巧。当初学CSS的时候，并没有正儿八经的从文档学起，走了不少弯路。这次正好巩固一下。
以下是我的阅读笔记和练习一
CSS选择符(selector)的优先级分为4级:a,b,c,d
- 如果是行内样式(inline style)*,则a=1
- b等于ID选择符*的数量
- c等于样式(class),伪类(pseudo-class)*和属性(attribute)*选择符的数量
- d等于类别(type)*，伪对象(pseudo-element)*选择符
(*)解释:
*行内样式(inline style)：元素的style属性，比如<div style="color:red;"></div>,其中的color:red;就是行内样式
*ID选择符：元素的id属性，比如<div id="content"></div>可以用ID选择符#content*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.具体看这里*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。具体看这里
得出的值按照abcd来连接，然后对比整个数字的大小就可以了 :) 来一个范例看看：
首先页面结构是这样的
<div id="wrapper">
<div id="content">
<p class="article"><span class="date" style="color:red;">10-21</span></p>
</div>
</div>| 选择符 | 分析 | 优先级(abcd) |
|---|---|---|
style="color:red;" | 行内样式,a=1 | 1000 |
#wrapper #content {color:red;} | 两个ID选择符,b=2 | 0200 |
#content .article .date {color:red;} | 一个ID选择符b=1 两个样式选择符c=2 | 0120 |
div#content {color:red;} | 一个ID选择符b=1 一个类别选择符d=1 | 0101 |
#content {color:red;} | 一个ID选择符b=1 | 0100 |
p.article .date {color:red;} | 两个样式选择符c=2 一个类别选择符d=1 | 0021 |
p.article {color:red;} | 一个样式选择符c=1 一个类别选择符d=1 | 0011 |
p span {color:red;} | 两个类别选择符d=2 | 0002 |
span {color:red;} | 一个类别选择符d=1 | 0001 |
0 Responses to CSS Mastery - 阅读笔记一