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;
}
</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>
</body>
</html>
最终页面效果：
