本文介绍了多个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属性应该是唯一的,

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


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

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

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

解决方案




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

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





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

也很有用。





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

无头


-

电子邮件和过滤列表:

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.

解决方案



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




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




..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实例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-07 09:36