精通CSS与HTML设计模式 第三章（CSS选择符与继承）
一、 类型，类和ID选择符
这个比较简单就不多说
二、定位和群组选择符
群组选择符：body,div,h1{} 作用于一组元素
后代选择符：div #mydiv {} 作用于某一环境下的元素
子选择符：#mydiv >*{} 作用于mydiv下所有直接子元素
兄弟子元素（单一）：li+li 作用于li元素后的一个兄弟li元素
兄弟子元素（所有）：li~li 作用于li元素后的所有li元素
第一个节点:li:firstchild 作用于兄弟节点中的第一个子元素
兼容性：只有群组选择和后代选择符 IE6支持， 所有其他选择器在IE7 其他主流浏览器中支持
代码
<head>
<title>无标题页</title>
<style type="text/css">
p
{
border: solid 1px;
}
.class1
{
padding: 5px;
}
.class2
{
letter-spacing: 10px;
}
#myp
{
background-color: Silver;
}
p, ol, li
{
border: 1px solid red;
padding-left: 10px;
font-family: Monospace;
margin: 10px;
margin-left: 0px;
}
ol
{
margin-left: 0px;
padding-left: 40px;
margin-top: 20px;
}
div *.my-class
{
font-size: 1.2em;
font-weight: bold;
}
#my-id p
{
background-color: red;
}
#my-id
{
border: 3px solid Blue ;
}
#my-id >*
{
border: 3px solid black ;
}
li + li
{
font-style: italic;
color: Blue;
}
h1+div
{
color:Green;
}
</style>
</head>
<body>
<h1>
类型，类和ID选择器</h1>
<p>
类型</p>
<p class="class1">
一个类增加了内边距</p>
<p class="class1 class2">
两个类增加了字间距</p>
<p id="myp">
id选择符背景color</p>
<h1>
地位和群组选择器</h1>
<p>
p.my-class</p>
<div id="my-id">
<!--123-->
<ol>
<li>div ol li</li>
<li>div ol li</li>
<li>
<p class="my-class">
div ol li</p>
</li>
<li>888</li>
</ol>
<div>123</div>
</div>
<h1>兄</h1>
<div>弟</div>
<div>二弟</div>
</body>
</html>
二、属性选择器
selectior[属性] 作用：只要含有此属性都可以使用
selectior[属性=值] 作用：有此属性并且要等于此值
兼容性：IE6支持不支持， 其他浏览器支持良好
代码
<head>
<title>无标题页</title>
<style type="text/css">
code{ white-space:pre}
p[title]{ background-color:red}
p[title='Third paragraph']{ background-color:Blue}
</style>
</head>
<body>
<h1>属性选择符</h1>
<p>这段话没有附加<code>title</code>属性。</p>
<p title="Second">
<code>p[title~=""]</code>
</p>
<p title="Third paragraph">
这个是third paragraph
</p>
<p title="#4 paragraph">
这个是 #4 paragraph
</p>
</body>
</html>
三、伪类
element:first-letter{}
.class:first-letter{}
#id:first-letter{}
element:first-line{}
.class:first-line{}
#id:first-line{}
注：此伪类只对终端块状元素搭配，它们对内联元素或终端化元素不起作用 div 是属于终端块状元素
兼容性：IE6 不支持， IE7后来修改了这个BUG
代码
<head>
<title>无标题页</title>
<style type="text/css">
p:first-letter
{
color:Red;
}
div:first-letter
{
color:Red;
}
span:first-letter
{
color:Red;
}
</style>
</head>
<body>
<p>我是</p>
<div>我是</div>
<span>我是</span>
</body>
</html>
四、伪类选择符
a:link 未被浏览过的超链接
a:visited 已经被浏览过的超链接
a:hover 鼠标悬停在上面
a:fouce 在非IE上获取到焦点 （无效）
a:active 在IE上获取到焦点 （个人测试结果 可用）
兼容性：IE6只支持 a:hover 其他浏览器支持良好
五、子类选择符
.class{} 父类
.class.subclass{} 子类 子类会继承下所有父类的属性
应用： <p class="父类 子类">矩形</p>
个人体会： 除了比较符合面向对象的思想但，其余没什么分别 （个人不推荐）
