What is the difference between id and class in CSS, and when should I use them? [duplicate]

前端未结

关注

 15  1183

夕颜

相关标签:

15条回答

猫巷女王i

2020-11-22 06:28
- Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links.
  
  Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.
  
  Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)
  
  Examples of class names are: tag, comment, toolbar-button, warning-message, or email.
- Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.
  
  Examples of ids are: main-content, header, footer, or left-sidebar.
A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.
0 讨论(0)
发布评论:

提交评论
- 加载中...
被撕碎了的回忆

2020-11-22 06:32
id selector can be used to more elements. here is the example:

css:
```
#t_color{
    color: red;
}
#f_style{
    font-family: arial;
    font-size: 20px;
}
```
html:
```
<p id="t_color"> test only </p>
<div id="t_color">the box text</div>
```
I tested on internet explorer (ver. 11.0) and Chrome (ver.47.0). it works on both of them.

The "unique" only means one element can not have more than one id attributes like class selector. Neither
```
<p id="t_color f_style">...</p>
```
nor
```
<p id="t_color" id="f_style">...</p>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

隐瞒了意图╮

2020-11-22 06:34

As pretty much everyone else has said use ID for one-off elements and class for multiple use elements.

Here is a quick, over simplified example, take HTML and HEAD tags as read

<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>

Also, as mentioned in other answers ID are well exposed to javascript, classes less so. However modern javascript frameworks like jQuery leverage class for javascript too

0 讨论(0)

上一页 1 2 3

热议问题