<!--
第1部分 CSS规则特性
1 继承性：父元素样式可以被子元素继承，一般只能继承颜色和字体；
2 层叠性：给一个元素设置不同声明，效果会叠加；
3 优先级：给同一个元素设置相同声明，效果以后者为准，也叫就近原则；
第2部分 选择器
1 元素选择器 略；
2 类选择器：选择class等于某值的所有元素，是程序员根据逻辑给元素增加的分类；
3 id选择器：选择id等于某值的惟一的元素；
4 选择器组：写出一组选择器，选中每个选择器所对应的目标的“并集”；
5 派生选择器：
后代选择器：选择某元素所有后代（子孙）元素
子元素选择器：选择某元素的所有子元素
6 伪类选择器：：用于像某些选项添加特殊的效果
使用冒号（ ：）作为结合号，结合号左边是其他选择器，右边是伪类
常用伪类：
-:link
-:active
-:visited
-:hover
-focus:
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo3</title>
<style>
/*1 继承性：父元素样式可以被子元素继承，一般只能继承颜色和字体*/
body{
font-family:"微软雅黑","文泉驿正黑","黑体"; /*三个字体分别支持windows、linux、mac,一般都写*/
background-color:silver; //背景颜色
color:blue; //字体颜色
}
/*2 层叠性：给一个元素设置不同声明，效果会叠加*/
h2{
font-family:"微软雅黑";
}
/*此处省略无数行声明，写着写着忘了加一个申明可以另写，会叠加*/
h2{ color:red;
font-size:50px;
}
/*3 优先级：给同一个元素设置相同声明，效果以后者为准，也叫就近原则*/
h3{
color: gray;
}
/*此处省略无数行声明*/
h3{
color:green;
}
/*选择器就是用来选择页面上的元素 */
/* 1 元素选择器 前面都有 略 */
/* 2 类选择器：选择class等于某值的所有元素，是程序员根据逻辑给元素增加的分类 */
.girl{
color:pink;
font-size:40px;
}
/*3 id选择器：选择id等于某值的惟一的元素*/
#p3{
color:yellow;
font-size:50px;
}
/* 4 选择器组：写出一组选择器，选中每个选择器所对应的目标的“并集” */
p.girl,#p3{
font-weight:bold; /*加粗*/
}
/* 5 派生选择器：
后代选择器：选择某元素所有后代（子孙）元素
子元素选择器：选择某元素的所有子元素
*/
/*5.1 选择某元素的子孙*/
#p5 b{
color:red;
}
/*5.12选择某元素的儿子*/
#p5>b{
color:yellow;
}
/*6 伪类选择器：：用于像某些选项添加特殊的效果
使用冒号（ ：）作为结合号，结合号左边是其他选择器，右边是伪类
常用伪类：
-:link
-:active
-:visited
-:hover
-focus:
*/
</style>
</head>
<body>
<h1>老许</h1>
<h2>盼盼</h2>
<h3>哈哈</h3>
<p class = "girl">小倩</p>
<p class = "girl">小乔</p>
<p id = "p3">大蛇</p>
<p>牛魔王</p>
<p id="p5">
<u>安徽省<b>马鞍山市</b>安徽工业大学 </u> <br>
红豆生南国，<br>
春来发几枝。<br>
问君多采撷，<br>
此物最相思。<br>
</p>
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
</body>
</html>
