CSS中“类”目标的功能/目的是什么？

Question

首先，我不确定这是否属于 CSS 或其他任何类别，而且我也不是以英语为母语的人，但我会尽力而为。 我是编码新手，并在 Freecodecamp 通过了这个挑战，但不明白为什么我需要添加这个类。我发现了 2 个类似的问题，还查看了下一个挑战，但问题和挑战都没有帮助我理解添加这门课的意义。 挑战的名称是：使用 jQuery 选择器创建一个目标类。任何帮助表示赞赏。

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>

Answer 1

对于大卫·耶瑟的回答，

您也可以使用 ECMA 的方法 .querySelector 或 .querySelectorAll 方法。

我知道这不是对使用 jQuery 问题的直接回答，但我觉得您可以通过使用原始 javascript 而不是第三方 API 来理​​解类属性和 id 属性如何影响 DOM 结构。

例如，在贴出的结构中：

document.querySelector(".well") 

在您的沙箱中将返回与文档树中的 well 类匹配的 dom 对象的第一个实例，而：

 document.querySelectorAll(".well") 

将返回一个包含两个 .class 节点的 HTML 集合。

请参阅MDN's document.querySelector 以更好地了解查询 html 节点。它会派上用场，因为 jQuery 库越来越少地用于替代 React、Angular 或 Vue 来编译和隔离您的 Web 构建代码。

Answer 2

一个类既不属于 CSS 也不属于 JS，而是构成网站的文档对象模型 (DOM) 的 HTML 的一部分。

假设你有这个 HTML：

<button class="btn">Button</button>

要定位一个类，请使用. 运算符。

因此，在 CSS 中，您可以像这样定位一个类：

.btn { background-color: red }

而在 jQuery 中，你会以这样的类为目标：

$('.btn').css('background-color', 'red');