目录
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫兄弟元素
<div>
<span>我是div标签中的span元素</span>
<p>
<span>我是p标签中的span元素</span>
</p>
</div>
<span>我是body标签中的span元素</span>
元素选择器
后代元素选择器：选中指定元素中的指定后代。语法：祖先元素 后代元素{}
后代元素可以有多个
<style>
div span{color:red;}
#d1 span{color:blue;}
</style>
子元素选择器：选中指定父元素的指定子元素。语法：父元素>子元素{}
IE6以下的浏览器不适用子元素选择器
<style>
div > span{background-color:pink;}
</style>
伪类选择器
伪类专门用来表示元素的一种特殊状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框。当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
：link表示一个普通的链接（没有访问过的链接）
为没有访问过的超链接设置一个颜色为粉色。
<style>
a:link{color:pink;}
</style>
：visited表示访问过的链接
为访问过的链接设置一个颜色为红色。（浏览器是通过历史记录来判断一个链接是否访问过）由于涉及到用户的隐私，所以使用visited伪类只能设置字体颜色。
<style>
a:visited{color:red;}
</style>
：hover表示鼠标移入的状态
<style>
a:hover{color:blue;}
</style>
：active表示链接正在被点击的状态
<style>
a:active{color:black;}
</style>
：hover和：active也可以为其他元素设置，但IE6中不支持
：focus表示文本框获取焦点以后，修改背景颜色为黄色
<style>
input:focus{
background-color:yellow;
}
</style>
<input type='text'></input>
：：selection伪类可以为p标签中选中的内容使用样式（在火狐浏览器中要采用第二种方式编写）
<style>
p::selection{
background-color:orange;
}
p::-moz-selection{
background-color:orange;
}
</style>
伪元素
：first-letter为第一个字符设置一个特殊的样式
<style>
p:first-letter{
color:blue;
font-size:40px;
}
</style>
<p>文字内容</p>
：first-line为第一行字符设置一个特殊的样式
<style>
p:first-line{
color:green;
font-size:60px;
}
</style>
<p>文字内容</p>
：before表示元素最前面的部分，一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容。
<style>
p:before{
content:"我会出现在文字最前边";
color:red;
}
</style>
<p>文字内容</p>
：after表示元素最后面的部分
<style>
p:after{
content:"我会出现在文字最后边";
color:orange;
}
</style>
<p>文字内容</p>
：before和：after中的内容在网页中无法被选中
属性选择器
title属性，这个属性可以给任何标签指定。当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
<p title="我是title中的文字">我是一个段落</p>
属性选择器：可以根据元素中的属性或属性值来选取指定元素。语法：[属性名],选取含有指定属性的元素;[属性名="属性值"]，选取含有指定属性值的元素；[属性名^="属性值"]，选取属性值以指定内容开头的元素；[属性名$="属性值"]，选取属性值以指定内容结尾的元素；[属性名*="属性值"]，选取属性值以包含指定内容的元素；
<style>
p[title]{background-color:yellow;}
</style>
<p title="abc">文字内容</p>
<p title="bcd">文字内容</p>
<p >文字内容</p>
为title属性值是hello的元素设置一个背景颜色为黄色
<style>
p[title="hello"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="bcd">文字内容</p>
<p >文字内容</p>
为title属性值以ab开头的元素设置背景颜色为黄色
<style>
p[title^="ab"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="abcd">文字内容</p>
<p >文字内容</p>
为title属性值以d结尾的元素设置背景颜色为黄色
<style>
p[title$="d"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="abcd">文字内容</p>
<p >文字内容</p>
为title属性值包含e的元素设置背景颜色为黄色
<style>
p[title*="d"]{background-color:yellow;}
</style>
<p title="hello">文字内容</p>
<p title="abcde">文字内容</p>
<p >文字内容</p>