CSS Mastery - 阅读笔记二在"Styling lists and creating nav bars"章节发现一个对我来说很有用的ie bug fix:li {display:inline;}作者的注释是"Removes large gaps in IE/WIN".马上试验了一下，真的解决了一个长久困扰我的问题。
以前在做一些纵向的导航菜单的时候，经常会用到一个锚（a）的hover效果，范例可以看这里
li a {display:block;background:#000;color:#FFD800;}
li a:hover,li.here a {background:#570B06;}这里我们把锚（a）块级化以后，在IE7.0之前的版本中，锚（a）后面会有一个空白textnode，另起一行的问题，这样便把各个li的间距加大了。我以前的fix方式，就是把html结构里li前后的空格都消灭掉，做法比较烦人...
现在好了，只要li {display:inline;}就可以了，多看书还是有益的 :)
CSS Mastery - 阅读笔记一CSS Mastery - Advanced Web Standards 是一本好书，虽然写了挺久的CSS了，却没有时间去正式的学习一下。今天借着小半天的空闲时间，看了一下“关于CSS优先级(Specificity)的解释”的章节。
在CSS编写中，优先级是一个非常有用的技巧。当初学CSS的时候，并没有正儿八经的从文档学起，走了不少弯路。这次正好巩固一下。
以下是我的阅读笔记和练习一
CSS选择符(selector)的优先级分为4级:a,b,c,d
(*)解释:
*行内样式(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 |