开发者学堂课程【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 属性值顺序没有关系。