CSS中id和class之间的区别以及何时使用它

J.K*_*.A. 161 html css

<style>
    #main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>

<div id="main">
    Welcome
</div>
Run Code Online (Sandbox Code Playgroud)

在这里,我给了一个iddiv元素,它的应用相关的CSS它.

要么

<style>
    .main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>
<div class="main">
    Welcome
</div>
Run Code Online (Sandbox Code Playgroud)

现在,这里我给classdiv,它也做同样的工作对我来说.

那么Id之间的确切区别是什么?id我应该何时使用以及何时应该使用class.?我是CSS和网页设计的新手,在处理这个问题时有点困惑.

lc.*_*lc. 204

  • 如果要在整个页面/站点中一致地设置多个元素,请使用.当您拥有或可能将来拥有多个共享相同样式的元素时,类非常有用.示例可以是用于相关链接的"评论"或某种列表样式的div.

    另外,给定元素可以有多个与之关联的类,而一个元素只能有一个id.例如,你可以给一个div两个类,它们的样式都会生效.

    此外,请注意,除了视觉类之外,类通常还用于定义行为风格.例如,jQuery表单验证器插件大量使用类来定义元素的验证行为(例如,是否需要,或者定义输入格式的类型)

    类名的示例有:标记,注释,工具栏按钮,警告消息或电子邮件.

  • 如果页面上有一个元素,则使用该ID将采用该样式.请记住,ID必须是唯一的.在您的情况下,这可能是正确的选项,因为可能只有页面上的一个"主"div.

    id的示例包括:main-content,header,footer或left-sidebar.

记住这个的一个好方法是类是一种项目,id是页面上项目的唯一名称.

  • 只有我一个(id),但很多人是中产(class)。我使用 SSN 号码 (#) 来唯一地 (id) 标识我,而我只是社会 (class) 的一小部分 (.)。 (2认同)

sur*_*ers 63

ids是独一无二的

  • 每个元素只能有一个元素 id
  • 每个页面只能有一个元素 id

classes不是唯一的

  • 您可以class在多个元素上使用相同的元素.
  • 您可以class在同一元素上使用多个es.

Javascript关心

JavaScript人员可能已经更加了解classes和ids 之间的差异.JavaScript取决于只有一个具有任何特定的页面元素id,否则getElementById无法使用常用的函数.


Roh*_*zad 22

有关此更多信息,请单击此处.

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}
Run Code Online (Sandbox Code Playgroud)

(请注意,CSS使用前缀#表示ID和.对于类.)

但是 HTML 5中不推荐使用colorHTML 4.01 <font>标记属性.在CSS中没有"font-color",样式是color如此,上面应该是:

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}
Run Code Online (Sandbox Code Playgroud)

文字是白色的.

  • Downvoted,因为这个答案的原始版本的有用部分是[被盗](http://stackoverflow.com/a/84416),当前版本没有回答这个问题.应该删除这个答案. (63认同)
  • 对我来说"有用"的部分是"(注意,CSS使用前缀`#`表示ID,`.`表示类.)",我在链接的答案中没有看到. (2认同)

小智 10

ID必须是唯一的 - 在html文档中不能有多个具有相同ID的元素.类可用于多个元素.在这种情况下,您可能希望使用"主"ID,因为它(可能)是唯一的 - 它是"主"div,用作其他内容的容器,只有一个.

如果你有一堆菜单按钮或其他一些你想要重复样式的元素,你可以将它们全部分配到同一个类,然后设置该类的样式.


Jon*_*n P 5

几乎所有人都说使用ID作为一次性元素,使用类作为多用途元素.

这是一个快速,简化的示例,将HTML和HEAD标记作为读取

<body>
    <div id="leftCol">
        You will only have one left column
    </div>
    <div id="mainContent">
        Only one main content container, but.....
        <p class="prettyPara">You might want more than one pretty paragraph</p>
        <p>This one is boring and unstyled</p>
        <p class="prettyPara">See I told you, you might need another!</p>
    </div>
    <div id="footer">
        Not very HTML5 but you'll likely only have one of these too.
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

此外,正如其他答案中所提到的,ID很好地暴露于javascript,类更少.然而,像jQuery这样的现代javascript框架也可以利用javascript类