前言:
目前大家对“css名称选择器”都比较重视,我们都想要了解一些“css名称选择器”的相关资讯。那么小编也在网上汇集了一些有关“css名称选择器””的相关资讯,希望大家能喜欢,大家快快来学习一下吧!上午我们说了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类
今天对类的选择器-多类名就讲到这里了,类名之间需要使用空格
大家十一快乐~