Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
348 views
in Technique[技术] by (71.8m points)

html - CSS ID's and classes

I'm new to HTML / CSS coding and since I first bumped into the ID and class selector, one question has been running through my mind. I searched the web thoroughly over and over again, but I coudln't find the answer I was looking for.

The question is : Why use ID when you can do the same task with class ?

I mean, ok I know that ID's are just for one time use and classes are for many, but what forbids me from using the class selector for just once ? So, according to this, what is the purpose of existence of ID's in CSS ?

Furthermore, what do we need ID's and even classes for, when we can make a new element in the stylesheet with exactly the same attributes ?

The following code is an example of what I'm trying to ask :

<!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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

There are several differences between ids and classes. Probably most importantly there is a semantic difference. An Id needs to be unique (actually you html is invalid if you use the same id twice in the document) and identifies special elements in your HTML Document, classes are there to group elements which have something in common.

1) Searching for id in the HTML Tree is faster than class because the css processor stops at the first matching element it finds. (Thus id css selectors are faster).

2) Ids and classes have different specificity. Since ids are unique in the document, they have higher specificity than classes. This is important in bigger projects where you have a lot of CSS rules where a lot of overwriting occurs.

3) The difference between classes and ids is even greater once you work with javascript.

Defining new elements leads you markup to be invalid, that's why the last option is not a good idea.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...