一个标签内可以携带多个类名 | 学习笔记

简介: 快速学习一个标签内可以携带多个类名。

开发者学堂课程【CSS 快速掌握一个标签内可以携带多个类名】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9183


一个标签内可以携带多个类名


内容介绍

一、一个标签内可以携带多个类名

 

一、一个标签内可以携带多个类名

类名指的是 class 的属性值。

一个标签内可以携带多个类名,指的是 class 的属性值可以有多个,每一个属性值之间使用空格分隔。

例子:

<标签名 class = ”1 2 3”></标签名>

多个类名的优点:

1.减少 css 的代码量

2.多个类名的样式会叠加到当前元素上面

范例:

/*

先给class=div1的这个元素将其内容设置为加粗的效果

class=div2的这个元素将其内容的颜色设置为红色

class=div3的这个元素内容将其设置为加粗并且颜色也设置为红色

*/

.div1{

font-weight: bold;

}

.div2{

Color:#f00;

}

.div3{

font- weigh:bold;

Color:#f00;

}

用上class标签

<div class=”div1”></div>

<div class=”div2”></div>

<div class=”div1 div2”></div>

缺点:一个标签内有多个类名,它们设置的样式如果一样,那么就会存在样式冲突以 css 中的代码作为标准,谁写在后面就以谁作为标准,和 HTML 中的 class 属性值顺序没有关系。

相关文章
|
6月前
Thymeleaf内置对象、定义变量、URL参数及标签自定义属性
Thymeleaf内置对象、定义变量、URL参数及标签自定义属性
116 0
|
5月前
|
网络架构
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
|
23天前
表单输入绑定 修饰符
表单输入绑定 修饰符
|
5月前
|
JavaScript 前端开发
get请求包含参数属性为数组
get请求包含参数属性为数组
41 1
自定义标签属性
自定义标签属性
44 0
访问标签体
访问标签体
33 0
|
Windows
【clswindow框架应用】对于一个窗体中存在多个相同类名的输入框该如何区分填写?
【clswindow框架应用】对于一个窗体中存在多个相同类名的输入框该如何区分填写?
99 0
<a>标签传递数据另附上<a>标签所有属性
<a>标签传递数据另附上<a>标签所有属性
<a>标签传递数据另附上<a>标签所有属性
|
前端开发
1、CSS选择器(通配符,标签,类,id)
1、CSS选择器(通配符,标签,类,id)
150 0