《CSS实战精粹》读书笔记（三）
每一种样式规则都由两部分组成：一个选择符和一个或多个声明，每个声明都包括一个属性和一个值。声明的格式通常是属性名称，后面跟着一个冒号，然后是属性的值，最后是一个分号。
今天的笔记主要介绍的是选择符，当然，只是简单的介绍，毕竟我也不会太多。呵呵。-_-!!! 但是类似于元素元素符，以及类选择符和ID选择符这种就不说了，大家都懂。不懂的问问Google，虽然不知道这站明天还在不在了。。
后代选择符、子元素选择符和相邻选择符
后代选择符也叫上下文选择符——是由以‘空格’为连接符号，分隔开的两个或多个元素组成。它创建的样式只能用于那些是别的元素的后裔元素。
color: blue;
}
在下面的html结构中，所有的li元素，都以蓝色显示：
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four has a nested list
<ol>
<li>Sub-item one</li>
<li>Sub-item two</li>
</ol>
</li>
</ul>
子元素选择符——由以‘<’隔开的两个或多个元素组成。都说隔辈亲，但是子元素选择符则不是这样，该选择符定义的样式只管儿子不管孙子和重孙子。其与后代选择符相似但只选择子元素，而不是所有后裔（书中写的是祖先，英文版也是，感觉不正确）。
html结构与上面代码相同，但是我们将样式定义改为：
color: blue
}
现在我们再来看一下效果，位于 ol 标签内的“孙子辈的”li元素并没有变成蓝颜色。
相邻选择符——以‘＋’隔开的两个简单的选择符。俗话说，远亲不如近邻。CSS也为我们提供了相邻选择符，也就是兄弟选择符，不过经验证，该选择符，只管“弟弟”，不管“兄长”。也就是说其只会寻找位于自己后面的兄弟，而前面的兄弟则自生自灭去吧。
书中的说法是：
相邻选择符就是能够以紧跟某元素，并与其有共同父元素的元素为目标的选择符。
注意：IE6以下版本无效
例如定义如下样式：
h1 + p {border:1px solid blue;}
应用HTML如下：
<html>
<head>
<title>CSS相邻选择符</title>
<style>
p{width:300px;}
h1{font-size:20px;}
h1 + p {
border: 1px solid blue;
}
</style>
</head>
<body>
<p>
我位于h1元素上面，是他哥，我没有边框
</p>
<h1>我是h1元素，下面的是我兄弟，我为其加个边框</h1>
<p>
传说中我有边框，幸福的孩子啊
</p>
<p>
咱离h1标签有点远，算了，无用了
</p>
</body>
</html>
结果如下：
sibling_selecter
链接和动态伪类的顺序
不讲解这些伪类的区别了，大家自己去翻手册，只是强调一下，超链接伪类的正确顺序定义是——:link、:visited、:hover及:active。
伪元素
伪元素包括下面四种——:first-line、:first-letter、:before及:after。后两种用的相对较少，至少我在这之前没见过，孤陋寡闻啊。这里成也只简单介绍一下首字下常见的效果，直接看示例吧：
<html>
<head>
<title>首字下沉</title>
<style>
p {
font-size: 100%;
}
p:first-letter {
font-size: 300%;
font-weight: bold;
}
p + p:first-letter {
float: left;
}
</style>
</head>
<body>
<p>
我想让首字下沉，中文也一样，我没有加左浮动!!!
</p>
<p class="float">
我是p标签的邻居，我加了左浮动，看一下效果吧
</p>
</body>
</html>
效果如图：
呼，又一篇笔记结束了，加油。Good good study ,day day up!!
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/03/15/1732/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
呃，其实最后一个例子不好，加完左浮动，下面没有再加一行文字，看不出效果，不过大家简单看一下就行(此句自言自语)。。
[回复]
你怎么还玩上自言自语了，我来陪你聊聊。
[回复]
@LAONB
因为本来就是写给自己看滴，留个言，自己以后翻的时候能注意一下。呵。。
PS：当时懒得编辑原文了。。
[回复]
昨晚刚搜了一下怎么让li 一行显示多个？
[回复]