类选择器
一 、类选择器
单独选一个或者某几个标签, 可以使用类选择器
1. 语法
.类名 {
属性1: 属性1;
}
二 、类选择器 - 多类名
我们可以给一个标签指定多个类名. 这些类名都可以选出这个标签
1. 多类名使用方式
<div class="red font20"></div>
- 在标签class属性中写多个类名
- 多个类名中间必须用空格分开
三、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
</body>
</html>
ID选择器
一、id选择器的使用
HTML元素以 id属性 来设置id选择器, CSS中 id选择器以 “#” 来定义
1. 语法
#id名 {
属性1: 属性值1;
}
2. 注意
只能调用一次,
二、id选择器和类选择器的区别
- 类选择器好比人的名字, 一个人可以有多个名字, 同时一个名字也可以被多个人使用
- id选择器好比身份证号. 是唯一的, 不能重复