Question

可能重复：
Use HTML tag names, classes or IDs in CSS?

在CSS中，与类和ID有哪些主要区别？为什么要使用 xyz 的类以及为什么要使用 abc 的ID？我知道这里有类似的问题，但没有一个得到真正的回答。

我知道使用具有相同属性的多个元素的类和具有唯一属性或唯一元素的ID，但为什么呢？使用类不是一种可接受的做法，这样你就不会混淆自己在类和ID之间切换吗？在速度和优化，SEO等方面有什么区别......？

Answer 1

使用类不是一种可接受的做法，这样你就不会混淆自己在类和ID之间切换吗？

是的，但是假设你有20个盒子有1个类，有20个css属性设置，你想要1个div有不同的边框颜色，最好只给这个div的id而不是创造一个全新的课程。（如果你理解我的意思）

只需添加

即可

#specialdiv{
  border-color: #000;
}

而不是创建一个具有相同19个属性和1不同的全新类。当然你不是强制使用id，你也可以为这个div分配另一个额外的类。（例如<div class="box special">）

速度和优化，seo等方面的区别是什么？这有一个简单的答案，如果你优化你的CSS，它将导致较小的文件大小，从而导致更快的加载时间，这将提高你的排名。（是的网站速度/加载时间确实很重要）

Answer 2

首先，你可以使用任何有意义的东西，但如果你是语义标记的粉丝，以及内容和演示的良好分离，这可能对你有所帮助：

使用类来标识/分组类似的东西，类似于OOP中的类。例如如果您有产品列表，并且每个列表元素包含正好1个产品的数据，您可以为所有这些列表元素提供类.product。

相反，如果此产品列表是此网站上唯一的产品列表，您可以为整个列表指定ID #products，或者如果您需要更具体#available_products，则无论什么都有意义语义

Answer 3

这不是id的应用于独特的元素;这是他们必须。这意味着您可以使用它们来识别页面上的特定元素，使其与任何其他类似元素不同。除了对许多不同的javascript应用程序必不可少之外，id还允许您针对特定实例调整类。

当然，如果您从不需要做上述任何一项，请坚持上课。

Answer 4

在HTML页面中，您将id赋予一个元素，以赋予其唯一的标识，以便您可以通过从其ID中调用该元素来引用该元素。

对于类，您可以为HTML文件中的多个元素提供类。这就像你制作一组共享相同属性的元素，例如在一类学生中，所有学生共享一些共同的属性，但仍然有一些独特的属性，我们可以通过他们的卷来引用，这对于课堂上的所有人来说都是独一无二的。

例如，在一类学生中，我们在课堂上指定了所有常见属性。

    .class_students {
        grade:6;
        instructor:Ms XYZ;
     }

对于那个班级中不同学生独有的属性，我们将使用他们唯一的卷号，例如

    #roll_no6 {
        name: Micheal;
        age:10;
    }

同样，某些元素可以使用多个类，例如<div class="rounded blue">。这意味着这个元素属于不止一个群体，如果我们学校的例子，一个学生可能属于一个特定的类也可能属于一个体育团队，在这种情况下，它将共享两个团体的属性。

现在是展示每件事的最后一个例子。

    <student id="rollno6" class="grade6 hockey-team">
    </student>

CSS

    .grade6 {
       instructor:Ms XYZ;
       no-students:30;
       major:Math;
    }
    .hockey-team {
       kit-color: blue;
       trainer: Mr ABC;
    }
    #rollno6 {
       name:Micheal;
       lives: somewhere;
       position:center-forward;
       major:Physics;
    }

要提供一些您认为应该仅应用于rollno6的属性，您可以将其赋予该属性，并且该类的其余元素将保持不变。 grade6专业的属性告诉我们，该班的所有学生都是数学专业。但是你为特定的学生rollno6，现在是rollno6物理学专业的学生过度了。

css类和id

4 个答案: