共计 3686 个字符，预计需要花费 10 分钟才能阅读完成。
写在开篇
开篇之前，先提个问题，什么是类？分类吗？能够这么说吧！咱们能够给物体分类，也能够给人分类。正所谓，物以类聚，人以群分。难道咱们这里是给元素分类？用分类来了解是不精确的啦！从某些角度，也能够了解成分类，说白了也就是个标识而已。废话不说，咱们正式步入今晚的主题！
HTML 类
html 中的类是什么鬼？先上个例子，而后再分析它：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
.c1 {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="c1">
<h2> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
</div>
<div class="c1">
<p> 笔者亲自设计的，一个入侵性极低的 Oracle 监控计划 </p>
<a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter 监控 Oracle，一个入侵性极低的监控计划。</a>
</div>
<div class="c1">
<p> 意犹未尽的第 2 篇再次推出，一个入侵性极低的 Oracle 监控计划 </p>
<a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank"> 意犹未尽的第 2 篇再次推出，持续解说 oracledb_exporter 监控 Oracle，一个入侵性极低的监控计划。</a>
<div>
</body>
</html>成果如下图：
好了，咱们正式开始对它进行分析，搞清楚到底啥是类，下面的小栗子中，定义了 3 个 div 元素，它们的 class 属性值均为 “c1″。而后留神到没有？在 head 中的 style 标签里，通过”.c1“的形式同时对 3 个 div 进行了 css 款式的设置。所以也由此引出了它的一个特点，那就是多个 HTML 元素能够共享同一个类，上述的例子中 3 个 div（元素）的类（class）名都定义了为“c1”，且同时对 3 个 div 进行了 css 款式的设置，这就是它的共享性。不晓得笔者说明确了没有，好难堪。
那接下来，咱们再来个小栗子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
.c2 {
font-size: 120%;
color: crimson;
}
</style>
</head>
<body>
<h1> 彩虹 <span class="c2"> 运维 </span> 技术栈社区 </h1>
<p> 咱们会 <span class="c2"> 继续分享 </span> 运维和运维开发畛域相干的技术文章 </p>
</body>
</html>成果如下图：
下面的例子中，“运维”和“继续分享”这两个字都在 span 标签里，且这两个 span 标签都定义了 class 属性，class=“c2”，同时通过“.c2”的形式设置了 CSS 属性。下面的例子中，就是通过这样的方法实现了对某局部的文字进行款式的设置。
截止目前，咱们通过两个小栗子，间接解剖了什么是类，那么咱们再做个小总结：
- class 属性能够用于任何 HTML 元素
- 类名辨别大小写
CLASS 的语法
其实在后面的小栗子中，曾经解说过 class 的语法了，不晓得宽广盆友们留神到了没有。如果没有留神到，咱们再这个章节从新温习一下。
看上面代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
.cc3 {
background-color: blue;
color: white;
padding: 8px;
}
</style>
</head>
<body>
<h2 class="cc3"> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
<p class="cc3"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>
</body>
</html>成果如下图：
下面的例子中，是如何援用到文本内容并设置 CSS 属性的呢？答案就是通过.css3 这样的语法，咱们设置的类名是 css3。而后在 style 中，设置 css 属性，在 {} 大括号里的内容就是 CSS 的属性，对于 CSS，笔者后续会专门逐个解说哈。
一个元素能够属于多个类
什么？一个元素能够属于多个类？到底怎么玩，废话不说，咱们上个例子就晓得了。上面的例子，是在上一个例子的根底上进行了小革新，看上面代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
.cc3 {
background-color: blue;
color: white;
padding: 8px;
}
.css4 {text-align: center;}
</style>
</head>
<body>
<h2 class="cc3 css4"> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
<p class="cc3"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>
</body>
</html>成果如下图：
留神到这个语法了吗？class=”cc3 css4″，没错了！在下面的 style 中，别离对同一个 h2 元素进行设置了不同的 CSS 属性。也就是说，对同一个元素须要定义多个类，用空格分隔类名就能够实现啦！是不是太简略了啦？
类的复用
什么？类的复用怎么了解？也就是说不同的元素能够共享同一个类。其实这个概念，在之前的例子中都有用到啦！只不过还没有抛出这个概念而已，上面咱们来个小栗子，坚固一下。
这个例子是在上一个例子的根底上做了小革新，看上面代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
.share_class {
background-color: blue;
color: white;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h2 class="share_class"> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
<p class="share_class"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>
</body>
</html>成果如下图：
留神到了吗？两个元素：h2 和 p 元素，都应用了雷同的类，类名叫 share_class，这就达到了复用的成果呀！
JavaScript 应用 class
截止目前，还没解说到 js，那么先讲个小知识点，js 如何应用 class 的。当然，外围的用法也是应用类名为指定的元素实现一些性能，在 JavaScript 里是通过 getElementsByClassName()办法来拜访元素中的类名，反言之，也能够说是通过 getElementsByClassName()办法来拜访带有指定类名的元素。对于 js 的常识，后续笔者会一一解说每个知识点，不急，咱们慢慢来。
上面，先来个小栗子，这例子很简略，通过 js 实现点击后暗藏 h2 和 p 元素的内容，上面看代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<button onclick="my_fun()"> 点击能够暗藏元素哦 </button>
<h2 class="c1"> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</h2>
<p class="c1"> 咱们会继续分享运维和运维开发畛域相干的技术文章 </p>
<script>
function my_fun() {var x = document.getElementsByClassName("c1");
for (var i = 0; i < x.length; i++) {x[i].style.display = "none";
}
}
</script>
</body>
</html>成果如下图：
- 暗藏前
- 暗藏后
看到成果了吗？暗藏的性能就是通过 js 实现的，js 很弱小，前面咱们一起专门分享 js 的知识点。
写在最初
好了，今晚的知识点分享到此为止啦！诚邀宽广盆友的关注，望多多点赞、转发、珍藏。
本篇转载于：https://mp.weixin.qq.com/s/c9…
