<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style >
/*2.类选择器：选择class等于某值的所有元素.class是程序员根据逻辑自己给元素增加的分类 */
.man{
color: pink;
}
/*3.id选择器:选择id等于某值的唯一的元素 */
#p4{
color: yellow;
}
/*4.选择器组：写出一组选择器，选中每个选择器所对应的目标的并集 */
.man,#p4{
font-weight: bold;
}
/*5.派生选择器 */
/* 5.1 选择某元素的子孙 */
#p5 b{
color: red;
}
/*5.1 选择某元素的儿子 */
#p5>b{
font-size: 30px;
}
/*6.伪类选择器：根据元素的状态选择元素 */
/*6.1 选择未访问的超链接 */
a:link{
color: green;
}
/*6.2选择已访问的超链接 */
a:visited{
color: red;
}
/*6.3 选择激活态的按钮 */
#i1:active {
background-color: blue;
}
/*6.4 选择有焦点的文本框、密码框、文本域*/
#i2:focus{
background-color:green;
}
/*6.5选择鼠标悬停态（触碰）的图片*/
img:HOVER {
350px;
height: 350px;
}
</style>
</head>
<body>
<p class="man">唐僧师徒四人</p>
<p >孙悟空师徒四人</p>
<p class="man">猪八戒师徒四人</p>
<p id="p4">沙僧师徒四人</p>
<p id="p5">
温州市<u>平阳县<b>鳌江镇</b></u>经济<b>开发区</b>B幢5号；
</p>
<p>
<a href="https://www.baidu.com">百度</a>
<a href="https://home.cnblogs.com/blog/">博客园</a>
<a href="https://home.cnblogs.com">测试</a>
</p>
<p>
<input type="button" value="按钮" id="i1">
</p>
<p>
<input type="text" id="i2">
</p>
<p>
<img alt="" src="../images/01.jpg">
</p>
</body>
</html>