web的css选择器的学习笔记（测试开发全栈--HTML）
web的css选择器的学习笔记（测试开发全栈--HTML）<head><html lang="en">来看一下效果:使用<style>来来设置背景颜色和长宽，对应的代码如下:<!DOCTYPE html>
上午我们说了CSS样式中基础选择器的类选择器，下午继续举个类选择器的实例，如下面这个多色盒子
如果使用标签选择器，会比较麻烦。使用类选择器，会方便不少。
1.类选择器的使用
2.div就是一个盒子，用来装网页内容的。
来看一下效果:
使用<style>来来设置背景颜色和长宽，对应的代码如下:
<!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>
.red {
/*背景颜色*/
background-color: red;
width: 300px;
height: 100px;
}
.green {
/*背景颜色*/
background-color: seagreen;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
接下来就是类选择器-多类名
可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。简单理解就是一个标签可以有多个名字。
- 多类名使用方式<div red fontsize20>cool</div>在标签class属性中写多个类名;多个类名之间用空格分开；
- 多类名开发中场景可以把一些标签元素相同的样式(共同的部分)放到一个类里面这些标签都可以调用这个公共的类，然后再调用自己独有的类从而节省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>
.red {
/*背景颜色*/
background-color: red;
}
.green {
/*背景颜色*/
background-color: seagreen;
}
.fontsize {
/*字体*/
font-size: 30px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="red fontsize">王子</div>
<div class="green fontsize">太子</div>
<div class="red fontsize">世子</div>
</body>
</html>
将每个div中的字体、背景颜色的长度和宽度都设置好，然后每个div都调用这个class类
今天对类的选择器-多类名就讲到这里了，类名之间需要使用空格
大家十一快乐~
