可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Possible Duplicate:
Several elements with the same ID responding to one CSS ID selector

Below is the example code that I was testing and I got confused. Every one says that we can use or we should use only one time per id, but I have testes using using it multiple times but its giving me the correct output.

What should I do?

It's kinda working same like class for me in this example

code:

<html>
<head>
<style>

#exampleID1 { background-color: blue; } 
#exampleID2 { text-transform: uppercase; } 

</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>
<p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p>

<address id="exampleID1">

Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>


<blockquote id="exampleID1">
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

</body>
</html>

Please see the above code and answer me that why we should not use id selector two times in a page while its working fine.

回答1:

An id must be unique in a page. Use a class if you want to describe a group of elements.

why we should not use id selector two times in a page while its working fine.

You are making an error and depending on every browser that will ever view the page to compensate for it. You can't be sure they all will.

回答2:

I think the easier way to understand is doing an analogy with a product. Imagine that an ID works like a Serial Number, in other words, it must be unique, this way you can identify a product that have milions of equal copies.

Then, imagine the class as the Product Code, can be the bar code for example. In a supermarket all equal products have the same bar code to be read by optical reader.

So, an ID is an unique identifiquer and a class groups a group of elements.

But if i am using the same ID in my HTML/CSS i am get a perfect result, why should i be worried about unique IDs?

Reason number 1:

In the future, if you need to use Javascript and if you need to manipulate an specific element and it has a duplicated ID, your code will not generate the expected result.

Reason number 2

Your code will not be valited by W3C, what means that you can have headaches with your website's compability accross browsers. It can works fine in one browser and in other not.

Using a real example, imagine that you want to update dinamically, using Javascript, the text of this element:

<blockquote id="exampleID1">
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

With Javascript/JQuery you will use a code like this:

$("#exampleID1").html("Changing element content");

And then the text of the element <blockquote id="exampleID1"> will be updated, but the below element will be updated too, because it has the same ID.

<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>

So, if you want to update just one element, they must have unique IDs.

I hope you can use this explanation to understand better the difference between ID and class.

回答3:

It's working, but that's not the way IDs are meant to be used (according to the HTML specifications). An ID must refer only to one object. Describing multiple objects must be done with class, not id.

回答4:

You should use unique Ids to ensure the HTML is valid.

The reasoning behind this is simply that Ids are used to identify unique elements.

The page will still render, despite being invalid, but the biggest practical problem is that JavaScript and other libraries are optimised to work on the assumption that Ids are unique so, if you are trying to fetch all elements with an Id and hide them e.g. using jQuery

$('#exampleID1').hide();

Only the first element will be hidden, since to select by Id should only return a single item and once a single element is found the query is short circuited to return the single element. Without knowing this you can get some seemingly odd behaviour and hard to diagnose defects.

回答5:

why we should not use id selector two times in a page while its working fine

Because you don't know if it's working fine in every browser.

The specifications says that an id has to be unique in the page, so when browsers find your duplicate id:s they will try to handle it as best they can. Most browsers seem to handle it by using the identity only for the first element, but leaving the id attribute on the elements so that your CSS still works, but there is no guarantee that all browsers handle it that way.

Different browser vendors use different tactics for handling incorrect markup, and each vendor finds a "new, better" way, so incorrect markup is typically handled in as many different ways as possible.