一.元素之间关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
二. （补充）选择器
1.后代元素选择器
作用：选中指定的后代元素
语法：祖先元素 后代元素{ }
例如，
div span{ color : #00800;}
若加了id选择器，则
#d1 span{ color:#00800;}
2.子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
一般子元素选择器少用，常用后代元素选择器
3.伪类选择器
作用：伪类专门用来表示元素的一种特殊的状态
比如，访问过的超链接，普通的超链接，获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
正常在未设置情况下，链接的状态呈现两种状态1.访问过 2.未访问过
四个伪类选择器——链接交互的4中状态
1）正常链接
作用：表示普通链接（没访问过的链接）
语法： a：link
2）访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过，由于涉及到用户的隐私问题，所以使用visited伪只能设置字体的颜色
语法： a：visited（只能定义字体颜色）
3）鼠标滑过的链接
作用：hover表示鼠标移入的状态
语法： a：hover
4）正常点击的链接
语法： a：active
除此之外，hover和active也可以为其他元素设置。但是IE6中，不支持对超链接以外的元素设置：hover和active
例如，
p：hover{ background-color:yellow}
p：active{ backgroud-color:orange}
4.其他伪类选择器
1）获取焦点
语法： - ：focus
2）指定元素前
作用： 元素表示元素最前面的部分，一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容
语法： - ：before
3）指定元素后
作用：after表示元素的最后边的部分
语法： - ：after
4）选中的元素
语法： -：：selection
例如，创建一个文本框，点击后框变成蓝色（使用获取焦点）
例如，为P标签中选中的内容使用样式，可以使用 ：selection
注意，
p：：selection { background-color:orange; }兼容大部分浏览器
p：：-moz-selection { background-color:orange }兼容火狐浏览器
三.伪元素
给段落定义样式
1）首字母
语法： -：first-letter
2）首行
语法： -：first-line
例如，为P中的第一个字符设置一个特殊的样式
四.属性选择器
title属性：这个属性可以给任何标签指定。当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示。
1.属性选择器
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名=”属性值“]选取含有指定属性值的元素
[属性值^="属性值"]选取属性值以指定内容开头的元素
[属性值$="属性值"]选取属性值以指定内容结尾的元素
[属性值*="属性值"]选取属性值以包含指定内容的元素
若增加条件，则
p[title="hello"]{background-color:yellow}
若，
指定内容开头的元素，则
指定内容结尾的元素，则
