多个ID实例 [英] Multiple ID instances

查看:113
本文介绍了多个ID实例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

比真正的问题更有好奇心,但是......


我一直在滥用HTML ID属性。


。 .box {

保证金:10px;

}


#red {

背景色:#ff0000;

}


#green {

background-color:#00ff00;

}


< div class =" box" id =" red">< / div>

< div class =" box" id =" green">< / div>

< div class =" box" id =" red">< / div>


获取一个红色框,后跟一个绿色框和另一个红色框。


HTML验证器抱怨因为id属性应该是唯一的,

但是三大浏览器引擎让我逃脱它。


什么''是正确的这样做的方法?我应该只有盒装和盒装绿色

课程吗?当我只想更换一个

属性时,这似乎有点浪费。

解决方案

qwe< _1*******@yahoo.com>写道:

我一直在滥用HTML ID属性。

.box {
保证金:10px;
}

#red {
background-color:#ff0000;
}

#green {
background-color:# 00ff00;
}

< div class =" box" id =" red">< / div>
< div class =" box" id =" green">< / div>
< div class =" box" id =" red">< / div>

要获得一个红色框,后跟一个绿色框和另一个红色框。

HTML验证器会因为id属性而抱怨应该是独一无二的,但三大浏览器引擎让我逃脱它。


他们让你逃脱各种各样的事情,但他们会继续

在下一个版本中这样做吗?

什么是权利?这样做的方法?我应该选择boxred和boxgreen
课吗?当我只想更改一个
属性时,这似乎有点浪费。




将红色和绿色更改为类并将多个类应用于

divs。一些旧的浏览器不适用于任何一个类。


< div class =" box red">< / div>

< div class =" box green">< / div>

< div class =" box red">< / div>


或者按照你的建议使用课程,但是以不同的风格给出共享和不同的

属性,例如


..boxred,.boxgreen {margin:10px; }

..boxred {background-color:#ff0000; }

..boxgreen {background-color:#00ff00; }


或者将.box的背景颜色设置为红色,只需要#green

在一个例外中覆盖它。

< div class =" box">< / div>

< div class =" box" id =" green">< / div>

< div class =" box">< / div>


最佳解决方案将取决于您的实际情况,而不是这里使用的简化示例




顺便说一下,设置背景时应始终设置颜色 - 颜色。


史蒂夫


-

我的理论给你起见,我的异端邪说激怒了你,

我从不回信,你也不喜欢我的领带。 - 医生


Steve Pugh< st *** @ pugh.net> < http://steve.pugh.net/>


On Tue,05 Aug 2003 07:52:05 +0100,Steve Pugh< st ** *@pugh.net>写道:

他们让你逃脱各种各样的事情,但是他们会继续在下一个版本中这样做吗?


是的;只要市场上存在竞争,最不严格的浏览器就会有优势。

.boxred,.boxgreen {margin:10px; }
.boxred {background-color:#ff0000; } ./ /> .boxgreen {background-color:#00ff00; }




我认为这正是我所寻找的......谢谢。其他例子

也很有用。


qwe< _1 ******* @ yahoo.com>写道:

。box {
margin:10px;
}

#red {
background-color:# ff0000;
}
#green {
background-color:#00ff00;
}
< div class =" box" ; id =" red">< / div>
< div class =" box" id =" green">< / div>
< div class =" box" id =" red">< / div>

要获得一个红色框,后跟一个绿色框和另一个红色框。

HTML验证器会因为id属性而抱怨应该是独一无二的,但三大浏览器引擎让我逃脱它。

什么是正确的这样做的方法?我应该选择boxred和boxgreen
课吗?当我只想更改一个
属性时,这似乎有点浪费。




..box {margin:10px}

..red {background-color:#ff0000}

..green {background-color:#00ff00}


< div class =" box red">< / div>

< div class =" box green">< / div>

< div class =" box红色">< / div>

无头


-

电子邮件和过滤列表: http://www.headless.dna.ie/usenet.htm


More curiosity than a real problem, but...

I''ve been abusing HTML ID attributes slightly.

..box {
margin: 10px;
}

#red {
background-color: #ff0000;
}

#green {
background-color: #00ff00;
}

<div class="box" id="red"></div>
<div class="box" id="green"></div>
<div class="box" id="red"></div>

To get a red box followed by a green box and another red box.

HTML validators complain because id attributes are supposed to be unique,
but the big three browser engines let me get away with it.

What''s the "right" way to do this? Should I just have boxred and boxgreen
classes? That seems a little wasteful when I only want to change one
property.

解决方案

qwe <_1*******@yahoo.com> wrote:

I''ve been abusing HTML ID attributes slightly.

.box {
margin: 10px;
}

#red {
background-color: #ff0000;
}

#green {
background-color: #00ff00;
}

<div class="box" id="red"></div>
<div class="box" id="green"></div>
<div class="box" id="red"></div>

To get a red box followed by a green box and another red box.

HTML validators complain because id attributes are supposed to be unique,
but the big three browser engines let me get away with it.
They let you get away with all sorts of things, but will they continue
to do so in the next version?
What''s the "right" way to do this? Should I just have boxred and boxgreen
classes? That seems a little wasteful when I only want to change one
property.



Change red and green to classes and apply multiple classes to the
divs. Some older browsers will not apply either class.

<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

Or use classes as you suggest but give the shared and differeing
properties in different styles e.g.

..boxred, .boxgreen { margin: 10px; }
..boxred { background-color: #ff0000; }
..boxgreen { background-color: #00ff00; }

Or set the background-color of .box to red and just have #green
override it in the one exception.
<div class="box"></div>
<div class="box" id="green"></div>
<div class="box"></div>

The best solution will depend on you actual situation rather than on
the simplified examples being used here.

BTW you should always set a color when you set a background-color.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don''t like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>


On Tue, 05 Aug 2003 07:52:05 +0100, Steve Pugh <st***@pugh.net> wrote:

They let you get away with all sorts of things, but will they continue
to do so in the next version?
Yes; as long as there is competition in the market, the browser that is
least strict will have an edge.
.boxred, .boxgreen { margin: 10px; }
.boxred { background-color: #ff0000; }
.boxgreen { background-color: #00ff00; }



I think that''s exactly what I was looking for... thanks. The other examples
were useful too.


qwe <_1*******@yahoo.com> wrote:

.box {
margin: 10px;
}

#red {
background-color: #ff0000;
}

#green {
background-color: #00ff00;
}

<div class="box" id="red"></div>
<div class="box" id="green"></div>
<div class="box" id="red"></div>

To get a red box followed by a green box and another red box.

HTML validators complain because id attributes are supposed to be unique,
but the big three browser engines let me get away with it.

What''s the "right" way to do this? Should I just have boxred and boxgreen
classes? That seems a little wasteful when I only want to change one
property.



..box{margin:10px}
..red{background-color:#ff0000}
..green{background-color:#00ff00}

<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
Headless

--
Email and filter list: http://www.headless.dna.ie/usenet.htm


这篇关于多个ID实例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆