CSS 选择器笔记
决心把CSS从头到尾详细的再学一遍，主要是看《精通CSS》这本书，结合w3s上的例子和这本书的例子，估计这两天可以过一遍，下面是昨天的学习笔记，主要记录了选择器的详细分类和用法，还有框模型等没有具体的记录。
一.css选择器
a.常用选择器
最常用的选择器类型是类型选择器和后代选择器，类型选择器用来寻找特定类型的元素，比如段落、锚和标题，如：
p{color:black;}
a{text-decoration:underline;}
后代选择器用来寻找特定元素或元素族的后代，如：
li a{text-decoration:none;}
这两种选择器适用于那些应用范围广的一般特性。想要寻找更特定的元素，应该使用ID选择器和类选择器，如：
#intro{font-weight:bold;}
.dateposted{color:green;}
许多人过度依赖类选择器和ID选择器会导致文档结构混乱，使用类型、后代、ID和类的集中选择器的组合可以解决这一问题，如：
#maincontent h1{font-size:1.8em；}
#secondarycontent h1{font-size:1.2em;}
有时候希望文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态，这时要使用伪类选择器来完成，如：
a:link{color:blue;}
a:visit{color:green;}
a:hover,a:active{color:red;}
tr:hover{background-color:red;}
input:focur{background-color:yellow;}
注意：link和visited称为链接伪类，只能应用与锚元素。hover、active和focus称为动态伪类，理论上可以应用于所有的元素，但实际上只有现代浏览器支持这种功能，IE6和更低版本只注意应用于锚链接的active和hover选择器，完全忽视focus。
b.通用选择器
通用选择器一般用来对页面上所有元素应用样式：
*{
padding:0;
margin:0;
}
在与其他选择器结合使用时，用来对特定元素的所有后代应用样式。
c.高级选择器
这些选择器只有高级浏览器支持，IE6和更低版本不支持。
I.子选择器和相邻通报选择器
后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。下面的例子，外层列表中的列表项显示一个定制的图标，而嵌套列表中的列表项不受影响：
#nav > li {background:url(folder.png)no-repeat left top;}
<ul id="nav">
<li>Home</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
在IE6和更低版本中，可以使用通用选择器模拟子选择器的效果。具体做法为先在所有的后代上用用你希望子元素具有的样式，然后使用通用选择器覆盖子元素的后代的样式，如：
#nav li *{background:url(folder.png)no-repeat left top;}
#nav li *{background-image:none;}
有时候可能希望根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素，如：
h1+p{font-weight:bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
上面代码的显示效果是使得标题后的第一个段落以粗体显示。
II.属性选择器
属性选择器可以根据某个属性是否存在或属性的值来寻找元素。
例如，当鼠标停留在title属性的元素上时，大多数浏览器会显示一个工具提示，用来解释某些内容，如：
<abbr title="Cascading Style Sheets">CSS</abbr>
但是如果不把鼠标停在这个元素上，那么将没有任何迹象表明存在这一额外的信息。为了解决这个问题，可以使用属性选择器对具有title属性的abbr元素应用于其他元素不同的样式——下面的例子中，在他们的下面加上点，当鼠标停留在这个元素上时将鼠标改为问号：
abbr[title]{border-bottom:1px dotted #999;}
abbr[title]:hover {cursor:help;}
除了根据某个属性是否存在对元素应用样式之外，还可以根据属性的值应用样式，如对使用ref属性值nofollow链接得站定，在器旁边显示一个图像：
a[ref=:"nofollow"]{
background-image:url(nofollow.gif);
padding-right:20px;
}
由于在IE6和更低版本中不支持属性选择器，所以我们需要使用一种更聪明的使用属性选择器的方法。例如，IE在显示1像素的点边界方面有问题，所以可以将点边界显示为虚线。可以适应属性选择器将点边界只应用于能够正确的表现它的浏览器了，这是需要寻找class属性而不是使用类属性，如
.intro{border-style:solid;}
[class="intro"]{border-style:dotted;}
属性选择器还有一些特别的“微格式”用法，目前还没有得到大范围的推广，感兴趣的童鞋可以去http://gmpg.org/xfn/了解更多相关知识。
继承 注释 层叠和特殊性（!important) 样式指南
框模型 （IE的width是指内容区和内边距之和，为了不FUCKIE，应该尽量避免使用内边距padding）
空白边叠加：取两者外边距margin值较大者
定位
视觉格式化模型
相对定位 (position:relative;right:20px;left:20px;)
绝对定位 (position:absolute;)
固定定位（IE6和更低版本不支持）
浮动
行宽和清理（clear:right/left/both/none;)
