龙空技术网

「测试开发全栈--HTML」(4)CSS类选择器多应用和id选择器

蛋蛋杂谈 310

前言:

目前大家对“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类

今天对类的选择器-多类名就讲到这里了,类名之间需要使用空格

大家十一快乐~

标签: #css名称选择器 #css的id选择器 #css多id