CSS常用-选择器--续
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>选择器</title>
<style type="text/css">
/* 1、类选择器：
根据class选择一组元素 */
.female {
color:pink;
}
/* 2.ID选择器：
根据id选择唯一的元素。 */
#p4 {
color:red;
}
/* 3.选择器组：
选中一组选择器中，每个选择器所
对应的目标的并集（和）。 */
.female,#p4 {
font-family:
"微软雅黑","文泉驿正黑","黑体";
}
/* 4.派生选择器:
根据元素的层次关系选择某元素的子元素。 */
/* 4.1后代选择器：选择满足条件的所有子孙。 */
ol li {
color:blue;
}
/* 4.2子元素选择器：选择满足条件的所有儿子。 */
ol>li {
color:green;
}
/* 5.伪类选择器
根据状态来选择某一组元素。 */
/* 5.1选择未访问过的超链接。 */
a:link {
color:red;
}
/* 5.2选择已访问过的超链接 */
a:visited {
color:green;
}
/* 5.3选择激活状态（正在点）的元素 */
#b1:active {
background-color:blue;
}
/* 5.4选择有焦点（光标正在闪烁）的元素 */
#t1:focus {
background-color:red;
}
/* 5.5选择鼠标悬停（碰到）的目标元素 */
img:hover {
width:250px;
height:250px;
}
</style>
</head>
<body>
<h1 class="female">苍老师</h1>
<h2>范老师</h2>
<h3 class="female">王老师</h3>
<p>苍老师啊苍老师</p>
<p>范老师啊范老师</p>
<p>王老师啊王老师</p>
<p id="p4">瞧你们这点破事</p>
<ol>
<li>
河北省
<ul>
<li>石家庄</li>
<li>秦皇岛</li>
<li>张家口</li>
</ul>
</li>
<li>
河南省
<ul>
<li>郑州</li>
<li>洛阳</li>
<li>安阳</li>
</ul>
</li>
</ol>
<p>
<a href="https://blog.csdn.net/Coder_Boy_/">csdn博客</a>
<a href="http://www.sb.cn">随便</a>
</p>
<p>
<input type="button" value="点我" id="b1">
</p>
<p>
<input type="text" id="t1">
</p>
<p>
<img alt="" src="../images/04.jpg">
</p>
</body>
</html>页面最终效果：
