ID vs CLASS in CSS. Please explain in detail with

2019-03-07 01:44发布

站内问答 / HTML/CSS
505 8 4

I have heard that ID is unique and can only be used once in a page, but its working fine when used over multiple times on a page. Please let me know the purpose of ID and hows its exactly different from classes?

@HTML FILE 

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <LINK href="special.css" rel="stylesheet" type="text/css">
   <title>Untitled Document</title>
   </head>

    <body>
    <div class="layout">
    <div class="left_box">
    <div id="color"></div>
   </div>

   <div class="right_box">
    <div id="color"></div>
    </div>
     </div>
   </body>
   </html>

@CSS FILE

      @charset "utf-8";
     /* CSS Document */
     .layout {
 width:600px;
  height:600px;
  background-color:#666;
  margin:0 auto;
      }

     .left_box {
  width:300px;
  height:600px;
  float:left;
        }

    .right_box {
 width:300px;
 height:600px;
 float:right;
    }

    #color {
background-color:#CCC;
height:600px;
    }

8条回答
▲ chillily
2楼-- · 2019-03-07 02:22

Confusion abound here. Turns out, everybody is kinda right. Here are the facts:

 1. CSS doesn't care much which you use, as far as actually applying
    styling. ID's are technically faster for a browser rendering engine,
    but other than the most extreme of circumstances you'll probably
    never notice a speed difference
 2. . JavaScript cares very much about ID's. It can be noticeably faster
    for JavaScript to find an element by an ID. And this is where the
    "uniqueness" is very important. JavaScript will only find the
    "first" element with that ID, so if you have multiple on the page,
    confusion may ensue.
 3. ID's have an infinitely higher specificity value than classes. If
    there is an element with an ID and a class and they both apply
    styles, the styles applied by the ID will take precedence over the
    styles applied by the class. This can be useful, this can be a
    hindrance.

here is simplest example

#id    { color: red; }
.class { color: green; }

It's just an attribute and it's a seemingly arbitrary difference in syntax depending on which one you use. The results are predictable:

<div id="id">Would be red</div>
<span id="id">Would be red</div>

<div class="class">Would be green</div>
<span class="class">Would be green</div>

REFERENCE

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
3楼-- · 2019-03-07 02:26

If I can use an analogy of cars:

ID is like a Registration Plate

  • supposed to be unique - allows you to uniquely identify and style a single element

Class is like a Vehicle Model

  • allows you to deal with a set of related elements in one go.

Continuing the anaology:

It's fine to duplicate registration plates in so far as the cars still work - but the police would get quite annoyed! How would you identify a particular driver as having been speeding?

The same applies with HTML elements - reusing the same ID just stops you identifying a single element when you need to.

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
4楼-- · 2019-03-07 02:30

You have heard correctly. The behavior you are seeing is the result of browsers being coded to be extremely accommodating in the face of gross violations of the HTML standard.

The idea behind the fact that they have been coded to work even when presented with "bad" data is that, to less technically proficient users, it's the browser's fault if something does not work. Browsers were forced to work with tag soup, and this is the logical extension.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
5楼-- · 2019-03-07 02:33

I have heard that ID is unique and can only be used once in a page

That is an HTML rule and has nothing to do with CSS.

but its working fine when used over multiple times on a page.

Browsers perform error recovery. Don't depend on it as not all browsers will recover from all errors in the same way. Write valid markup.

Please let me know the purpose of ID and hows its exactly different from classes?

In HTML terms — an id is unique per document and can be a link target. A class can be reused.

In CSS terms — An id selector has a higher specificity than a class selector.

查看更多
0人赞 添加讨论(0) 举报
女痞
6楼-- · 2019-03-07 02:38

An ID is used to reference certain elements when using JQuery / Javascript etc, so technically if you wish to utilise these features then IDs on your page should be unique.

If you are only bothered about styling then it really isn't a huge issue, although it isn't valid practice.

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
7楼-- · 2019-03-07 02:39

In CSS terms, ID's are faster to find than classes.

You should use classes for things that are to be re-used.

EG:

@CSS

.displayNone
{
    display:none;
}
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)