CSS - 类、ID 和元素：有什么区别？ [复制]答案

【问题标题】：CSS - Classes, IDs, and Elements: What's the Difference? [duplicate]CSS - 类、ID 和元素：有什么区别？ [复制]
【发布时间】：2018-11-03 15:32:29
【问题描述】：

在 CSS 中，有几种方法可以处理不同的元素。（我将在以下示例中使用 div 元素。）

课程 - div.main {

ID - #id-name {

元素 - div {

假设我正在制作一个简单的动画，我想制作一个 p 元素旋转。

p {
  text-align:center;
  font-size:40px;
}
#spinner {
  animation-name:spin;
  animation-duration:03s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
 }
 @keyframes spin {
   from {
     transform:rotateY(0deg);
   } to {
     transform:rotateY(360deg);
   }
 }

&lt;p id="spinner"&gt;Hello, world!&lt;/p&gt;

如果我将 p 地址中的所有 animation 部分包括在其中我使文本更大和居中，或者使用诸如 p.main 之类的类而不是id 叫spinner？有区别，还是只是偏好？

<p>Thanks!</p>

【问题讨论】：

Google css specificity 并阅读它。这是基本的。

标签： html css class

【解决方案1】：

让我们一一看看：

使用元素名称：
如果您将 element 用作 css 选择器，您将使用 TagName
example 定位所有元素：p{color: red;} 将使每个 p 元素的颜色变为红色。
在元素中使用类名：
类可用于定位多个元素，您可以通过为任何元素指定它来缩小目标范围。
示例：p.class-name{color: red;} 仅适用于具有该类名称的元素，而不适用所有元素。
使用 id 的：
ID 是唯一的，并且必须准确，您可以定位具有相同 ID 的任何元素。它应该具有一对一的映射，这意味着没有重复的 ids。
示例：p#some-id{color: red;} 仅对具有该 id 的元素应用样式。

我希望它说明了几点。

【讨论】：