1.元素之间的关系
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
- 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素叫做兄弟元素
<div>
<p><span>我是p标签中的span</span>></p>
</div>p是span的的父元素。div直接包含了p，间接包含span。
2.两种元素选择器
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
举例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* 将div中的span设置为绿色
*/
div span{
color:greenyellow;
}
</style>
</head>
<body>
<div>
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<span>
我是body中的span
</span>
</body>
</html>结果：
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* 选中id为d1的div中的p元素中的span元素
*/
#d1 p span{
color:red;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>我是body中的div</div>
</body>
</html>结果：
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素
注意：IE6及以下不兼容子元素选择器
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* 为div的子元素span设置背景颜色为黄色
*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
</body>
</html>结果：
3.样式的继承
- 在CSS中，祖先元素上的有些样式，也会被它的后代元素所继承。利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
- 有些样式不会被继承。如背景相关的样式，边框相关的样式都不会被继承。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style = "font-size: 30px">
我是一个段落
<span>我是p中的span标签</span>
</p>
<span>我是p之外的span标签</span>
</body>
</html>结果：第一个span是p的子元素，所以给p设置样式，它的后代元素也会自动继承该样式。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style = "background-color: yellowgreen">
我是一个段落
<span>我是p中的span标签</span>
</p>
<span>我是p之外的span标签</span>
</body>
</html>结果： 虽然看上去第一个span像是继承了父元素的背景颜色样式。其实，是没有继承的，查阅w3c离线手册，背景颜色的继承特点为no,默认值为transpant(透明的)。
注意：背景样式为什么要设置成不继承呢？
因为如果背景是一个图片，后代元素的背景是不需要该图片的。所以，不是祖先元素的什么样式都会被继承的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。