Html CSS ID'；学校和班级_Html_Css_Class

Html CSS ID'；学校和班级

html css class

Html CSS ID'；学校和班级,html,css,class,Html,Css,Class,我不熟悉HTML/CSS编码，自从我第一次碰到ID和类选择器以来，有一个问题一直萦绕在我的脑海中。我一遍又一遍地在网上彻底搜索，但找不到我想要的答案问题是：当您可以对类执行相同的任务时，为什么要使用ID 我的意思是，好吧，我知道ID只是一次使用，类是多个的，但是有什么禁止我只使用一次类选择器呢？那么，根据这一点，在CSS中存在ID的目的是什么此外，当我们可以在样式表中创建具有完全相同属性的新元素时，我们需要ID甚至类做什么下面的代码是我想问的一个示例： <!doctype html&

我不熟悉HTML/CSS编码，自从我第一次碰到ID和类选择器以来，有一个问题一直萦绕在我的脑海中。我一遍又一遍地在网上彻底搜索，但找不到我想要的答案

问题是：当您可以对类执行相同的任务时，为什么要使用ID

我的意思是，好吧，我知道ID只是一次使用，类是多个的，但是有什么禁止我只使用一次类选择器呢？那么，根据这一点，在CSS中存在ID的目的是什么

此外，当我们可以在样式表中创建具有完全相同属性的新元素时，我们需要ID甚至类做什么

下面的代码是我想问的一个示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID's, classes and new elements</title>
<style>
    #sidebar1 {
        display: block;
        background-color: yellow;
        width: 200px;
        height: 500px;
        margin-right: 50px;
        float: left;
    }

    .sidebar2 {
        display: block;
        background-color: yellow;
        width: 200px;
        height: 500px;
        margin-right: 50px;
        float: left;
    }

    new_element {
        display: block;
        background-color: yellow;
        width: 200px;
        height: 500px;
        margin-right: 50px;
        float: left;
    }
</style>
</head>

<body>

    <div id="sidebar1">What is the difference?</div><!--Use of ID selector-->

    <div class="sidebar2">What is the difference?</div><!--Use of class selector just once !-->

    <new_element>What is the difference?</new_element><!--Use of a new made element with exactly the same attributes-->

</body>
</html>


ID、类和新元素
#侧边栏1{
显示：块；
背景颜色：黄色；
宽度：200px；
高度：500px；
右边距：50px；
浮动：左；
}
.侧边栏2{
显示：块；
背景颜色：黄色；
宽度：200px；
高度：500px；
右边距：50px；
浮动：左；
}
新元素{
显示：块；
背景颜色：黄色；
宽度：200px；
高度：500px；
右边距：50px；
浮动：左；
}
有什么区别？
有什么区别？
有什么区别？

两者的结果相同，但一个类可以使用一次或多次，而ID只能使用一次。如果您有一个唯一的元素不能在页面上重复使用，那么应该使用一个ID。如果是重复出现的内容，则应使用类

有些差异不仅仅涉及CSS。稍后，如果您深入研究javascript，可能会选择HTML元素。如果希望确保选择正确的元素，则ID比类更有用

ids和classes之间存在一些差异。也许最重要的是语义上的差异。

Id

需要是唯一的（实际上，如果在文档中使用相同的Id两次，则html无效）并标识html文档中的特殊元素，类用于对具有共同点的元素进行分组

1）在HTML树中搜索

id

比

class

更快，因为css处理器在找到的第一个匹配元素处停止。（因此

id

css选择器速度更快）

2） ID和类具有不同的属性。由于ID在文档中是唯一的，所以它们比类具有更高的特异性。这在大型项目中非常重要，因为在大型项目中，您有大量的CSS规则，其中会发生大量的覆盖

3）一旦使用javascript，类和ID之间的差异就更大了

定义新元素会导致标记无效，这就是为什么最后一个选项不是一个好主意。

没有任何东西禁止您对单个元素使用类。我觉得这是个不错的练习

这一切都是关于您正在使用的选择器的表达值。在您正在编写的html和css中。如果其他人或您未来的自己在其中一个代码中看到ID（您的其他代码看起来像，您知道自己在做什么；），他知道或至少应该立即知道某个元素在页面上只存在一次

缺点是，覆盖规则变得更加困难，因为ID的权重/a比类更高。根据类命名策略和您在此处设置的规则，这可能是一个问题，也可能不是一个问题
关于这个问题，有很多好的读物。首先，我建议您看看这里：
我认为有几个原因

一个是因为特殊性，
id
的排名高于
类

另一种是基于您正在影响的对象的特定用途。该类是否只影响字体大小、字体大小、字体系列？是否需要多次使用或仅使用一次
我认为语义也起到了一定的作用，也就是说，如果只使用一次
类
，那么使用
id
就更具语义了。

您还可以使用JavaScript的
id
从文档中获取元素。
这些只是少数，但我希望这会有所帮助。最好避免使用自定义标记，因为您永远不知道这些标记何时会标准化，将来会有特殊用途。您的html标记也将无效

我认为这是一个很好的解释id和类之间的区别。
您遇到的是CSS的特殊性概念。类、ID和元素选择器只有3个以上，这意味着必须有规则来管理优先级
计算特异性是非常困难的，但在大多数情况下，它看起来或多或少是这样的（优先级较高的选择器是第一位的）：

在标记样式定义中

身份证

班级

元素

一切（*）

当谈到ID或类的细节时，我将其视为一个风格和语义问题：ID应该与独特的东西一起使用，而类则旨在可重用。
css并不真正关心使用哪一个。当你想用你的元素做特定的事情时，Id更有用，主要是在JS中。根据浏览器的不同，创建新元素类型的处理方式也有所不同，某些版本（最明显的是较旧的IE版本）将不尊重这些“自定义”元素+1关于特异性的注释。我认为这是更重要的收获。我不知道具体性。谢谢！它还帮助我理解为什么我的代码有缺陷，其中的某些事情根本没有发生。