一、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
p {
color:green;
}
div {
color:pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
二、类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.red {
color:red;
}
</style>
</head>
<body>
<p class="red">zzf</p>
<p>zzf1</p>
<p>zzf2</p>
<div class="red">女生</div>
<div>女生1</div>
<div>女生2</div>
</body>
</html>
//多类名选择器 便于修改样式,防止代码冗余
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名选择器</title>
<style>
.red {
background-color: pink;
}
.font {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="red font">女生</div>
</body>
</html>
三、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
color:green;
}
</style>
</head>
<body>
<div id="green">女生</div>
</body>
</html>
四、通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
*{
color: blue;
}
</style>
</head>
<body>
<div>女生</div>
<p>zzf</p>
<span>zzf2</span>
</body>
</html>