选择器
选择器就是根据不同需求把不同的标签选出来，就是选择标签用的。
选择器分为基础选择器和复合选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：标签选择器、类选择器】id选择器和通配符选择器
标签选择器
定义：用于html标签名称作为选择器，按标签名分类，为页面中某一类标签指定统一的css样式。
<!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>css入门</title>
<style>
/* 给谁改样式{样式}
标签名{改什么样式} */
d{
color:red;
font-size: 12px;
}
</style>
</head>
<body>
<d>
红色
</d>
</body>
</html>
缺点：不能差异化样式，只能选择全部的当前标签。
结果演示类选择器（重点）
定义：差异化选择器，单独选择一个或某几个标签，然后需要用class属性来调用class。
语法
.类名{
属性1:属性值1;
}
<标签 class='类名'>红色</标签>
类名不能使用p div等标签名
小实验
<!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>综合案例</title>
<style>
.colr{
width: 100px;
height: 100px;
background-color:red;
}
.colg{
width: 100px;
height: 100px;
background-color:green;
}
</style>
</head>
<body>
<!-- div就是一个盒子，里面可以装任何内容 -->
<div class="colr">红色</div>
<div class="colg">绿色</div>
<div class="colr">红色</div>
</body>
</html>
结果演示
多类名
给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。相同样式的标签元素放到一个类里面，提高代码复用性。
格式
<div class="col ziti">测试</div>
<!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>多类名</title>
<style>
.col{
color: red;
}
.font{
font-size: 35px;
}
</style>
</head>
<body>
<div class="col font">测试</div>
</body>
</html>
结果演示
id选择器
定义：id选择器可以为标有特定id的html元素指定特定的样式；css中通过#来定义id选择器，html中通过id属性来调用id选择器。
id选择器：样式#定义，结构id调用只能调用一次，不能被别人调用，并且id选择器一般用于页面唯一性的元素上，经常和js搭配使用
<!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>id选择器 </title>
<style>
#col{
color: red;
}
</style>
</head>
<body>
<div id="col">能调用</div>
<div id="col">不能再调用了</div>
</body>
</html>
结果演示
通配符选择器
定义：使用”*”定义，表示选取页面中所有标签，然后全部给他们改样式。
通配符选择器不需要html调用，自动给所有元素使用该样式
