id和类的区别是什么?

当涉及到CSS时，<div class="">和<div id="">之间有什么区别?是否可以使用<div id="">?

我看到不同的开发人员用这两种方式来做这件事，因为我是自学的，所以我从来没有真正弄清楚。

当前回答

CSS选择器空间实际上允许有条件id样式:

h1#my-id {color:red}
p#my-id {color:blue}

将按预期渲染。你为什么要这么做?有时id是动态生成的，等等。进一步的用途是基于高级ID赋值来呈现不同的标题:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

就个人而言，我更喜欢较长的类名选择器:

body#list-page .title-block > h1 {font-size:56px}

因为我发现使用嵌套的id来区分治疗有点反常。只要知道，当Sass/SCSS领域的开发人员得到这些东西时，嵌套id正在成为常态。

最后，当涉及到选择器性能和优先级时，ID往往会胜出。这完全是另一个主题。

2011-12-07 19:52:44

其他回答

id和class是两个全局/标准HTML属性(下面的全局属性可以用于任何HTML元素)。

为一个元素指定一个或多个类名(引用样式表中的类)

id元素的唯一id

id属性提供了元素文档范围内的唯一标识符，其中class属性提供了对类似元素进行分类的方法。

id属性值必须在整个HTML页面中是唯一的，class属性可以在任何想要应用相同属性的地方被重用

2020-02-27 06:55:15

类用于具有公共属性的多个元素。例如，如果你想让p和body标签的颜色和字体相同，使用class属性或在一个除法本身。

另一方面，Id用于突出显示单个元素属性，并且仅用于特定元素。例如，我们有一个带有某些属性的h1标签，我们不希望它们在整个页面的任何其他元素中重复。

需要注意的是，如果在元素中同时使用class和id，则*id将覆盖class属性。*因为id只用于单个元素

参考下面的例子

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

我们生成输出

输出

2020-02-27 15:39:59

id必须是唯一的，因为类可以应用于很多东西。在CSS中，id看起来像#elementID，类元素看起来像.someClass

一般来说，当您有许多相似的东西时，当您想引用特定的元素和类时，请使用id。例如，常见的id元素包括页眉、页脚、边栏。常见的类元素是highlight或external-link。

阅读级联并理解分配给各种选择器的优先级是个好主意:http://www.w3.org/TR/CSS2/cascade.html

但是，您应该了解的最基本的优先级是id选择器优先于类选择器。如果你有这个:

<p id="intro" class="foo">Hello!</p>

and:

#intro { color: red }
.foo { color: blue }

文本会是红色的，因为id选择器优先于类选择器。

2009-02-12 23:38:15

id在整个页面中必须是唯一的。

一个类可以应用于许多元素。

有时候，使用id是个好主意。

在一个页面中，你通常有一个页脚，一个页眉…

然后页脚可以是一个带有id的div

而且还有课

2009-02-12 23:31:46

类就像类别。许多HTML元素可以属于一个类，而一个HTML元素可以有多个类。类用于应用通用样式或可以跨多个HTML元素应用的样式。

id是标识符。他们是独一无二的;其他人不允许拥有相同的ID。id用于向HTML元素应用唯一的样式。

我以这种方式使用id和类:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

在这个例子中，标题和内容部分可以通过#header和#content设置样式。内容的每个部分都可以通过#content .section应用一个通用样式。只是为了好玩，我为中间部分添加了一个“特殊”类。假设您希望特定的部分具有特殊的样式。这可以通过.special类实现，但是section仍然继承了#content .section中的通用样式。

当我进行JavaScript或CSS开发时，我通常使用id访问/操作非常特定的HTML元素，并使用类访问/应用样式到广泛的元素。

2009-02-12 23:53:34

id和类的区别是什么?

推荐文章

最新文章

标签