<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 css的选择器</title> <!-- style向HTML中嵌入css代码 --> <style> /* 1. 标签名选择器： */ /* 练习1：选中标签名叫div的所有元素*/ div{ background-color: #008000; /* 设置背景色 */ color: black; /* 设置字的颜色*/ font-size: 30px ; /* 设置字号 */ font-family: "宋体" ; /* 设置字体 */ } /* 练习2：选中标签名叫input的所有元素*/ input{ background-color: pink; /* 设置背景色 */ } /* 2. class选择器：先设置class属性 + 通过.获取class的值 */ .a{ /* 选中网页中所有class=a的元素们，其中class的值可以重复*/ color: yellow;/* 字的颜色 */ } /* 3. id选择器：先设置id属性 + 通过#获取id的值 */ #x{ /* 选中网页中id=x的元素，由于id的值不能相同，所以只选中了一个元素*/ font-size: 100px; /* 加大字号 */ } </style> </head> <body> <!-- div span p input --> <div>我是div1</div> <div>我是div2</div> <div>我是div3</div> <span>我是span1</span> <span>我是span2</span> <p>我是p</p> <input type="text" placeholder="我是input1"></input> <input type="text" placeholder="我是input2"></input> </body> </html>