<!-- 第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>