<!DOCTYPE html> <html> <head> <title>CSS元素选择器</title> <style type="text/css"> /* id选择器 id 选择器使用 #引入,它引用的是id属性中的值 html标签 id名字可以重复 */ #div1{ border:1px dashed red; } /* 类选择器 类选择器使用时,需要在类前面加一个 . 在项目开发中,给标签添加属性都是通过类选择器 */ .weather{ color:red; border: 1px dashed green; } /* 元素选择器 这是最常见的选择器,简单说,文档中的元素就是选择器 */ div{ width: 200px; height: 200px; border:1px solid red; } span{ border:1px solid green; } /* 属性选择器 如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器*/ /*只能改变type = "text" 的属性*/ input[type = "text"] { background-color:yellow; border: 1px solid blue; } </style> </head> <body> <div id="div1"> 今天天气不错1.... </div> <div id="div2"> 今天天气不错2... </div> <div class="weather"> 今天天气不错4 </div> <div>习主席</div> <div>李克强</div> <span>汪洋</span><br> <input type="text" placeholder="请输入用户名"><br> <input type="password" placeholder="请输入密码"><br> <input type="text" placeholder="请输入地址"> </body> </html>