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