3.CSS组合选择器
3.1 分组选择器
格式：标签名，#id标签，.类标签，....{}，举例：div，#id，.class{}
作用：将多个选择器合并成一个选择器
代码测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分组选择器</title>
<style type="text/css">
显示效果：
注意：
1.上面style中的属性设置应与下面的对应标签有对应，才能呈现相应效果；
2.backgroud-color设置颜色后占一行
3.2 属性选择器
格式：标签名[属性名=‘属性值’]{}，注意：属性值用\' \'包围
作用：指定某个属性为指定的元素样式
代码测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
显示效果：
注意：此处设置backgroud-color颜色相当于给文字所在区域上色。
3.3 子孙后代选择器
格式：div span{}、div div span{}
作用：匹配div里面的所有span、匹配div里面的div里面的所有span（包括子孙后代）
代码测试1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子孙后代选择器</title>
<style type="text/css">
div span{
font-size:40px;
color:blue;
}
</style>
</head>
<body>
<h3>div span</h3>
<div>
满天都是<span>小星星</span>
</div>
<div>
<h3>
一闪一闪<span>亮晶晶</span>
</h3>
</div>
</body>
</html>
显示效果：
代码测试2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子孙后代选择器</title>
<style type="text/css">
div div span{
font-size:30px;
color:orange;
}
</style>
</head>
<body>
<h3>div div span</h3>
<div>
<div>
满天都是<span>小星星</span>
</div>
</div>
<div>
<h3>
<div>
一闪一闪<span>亮晶晶</span>
</div>
</h3>
</div>
</body>
</html>
显示效果：
注意：此处设置backgroud-color颜色相当于给文字所在区域上色。
3.4 子元素选择器
格式：div>span{}、div>div>span{}
作用：匹配div里面的span元素、匹配div里面的div里面的span子元素
代码测试1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
div>span{
font-size:30px;
color:pink;
}
</style>
</head>
<body>
<h3>div>span</h3>
<div>
满天都是<span>小星星</span>
</div>
<div>
<h3>
一闪一闪<span>亮晶晶</span>
</h3>
</div>
</body>
</html>
显示效果：
代码测试2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子孙后代选择器</title>
<style type="text/css">
div div span{
font-size:30px;
color:orange;
}
</style>
</head>
<body>
<h3>div div span</h3>
<div>
<div>
满天都是<span>小星星</span>
</div>
</div>
<div>
<h3>
<div>
一闪一闪<span>亮晶晶</span>
</div>
</h3>
</div>
</body>
</html>
显示效果：
注意：此处设置backgroud-color颜色相当于给文字所在区域上色。
3.5 伪类选择器
格式：标签名：伪类选择器{ }，此处主要以a标签为例
作用：在指定元素的不同状态时出现的不同样式
测试代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p{
font-size:30px;
color:red;
}
显示效果：
测试代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
显示效果：
注意：此处设置backgroud-color颜色相当于给文字所在区域上色。
3.6 任意元素选择器
格式：* {}，*表示所有内容
作用：选中所有元素，一般会组合其它选择器使用
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任意元素选择器</title>
<style type="text/css">
*{
font-size:30px;
color:blue;
}
</style>
</head>
<body>
<p>我是p标签</p>
<a href="http://www.baidu.com">我是a标签:点击进入百度</a>
</body>
</html>
显示效果：
注意：此处设置backgroud-color颜色相当于给所有区域上色。
