如何在使用ID时应用CSS样式？

我在HTML编码一个新手，我有以下的HTML元素：如何在使用ID时应用CSS样式？

<div id="map_canvas" style="width: 500px; height: 370px; border: 1px solid #ccc; float: left"></div>

我想申请成为一个“左”的CSS样式。我一直在使用这样做对其他项目：

<div id="left" > 
    <input type=button .... 
</div>

然而，正如你所看到的，map_canvas已经是id我的元素，所以我怎么能应用CSS元素与ID left呢？

来源

2012-01-01 sramij

您应该在元素上使用'class =“left”'。这是真正的分类。 – 2012-01-01 00:53:03

请参阅：http://jsfiddle.net/94dwn/ – 2012-01-01 00:54:31

顺便说一句，你永远不应该使用重复的ID。一个id在整个DOM中应该是唯一的。否则，你最终可能会遇到样式和JavaScript发生的奇怪事情。 – Stephen 2012-01-01 00:54:51

#map_canvas { 
    width: 500px; 
    height: 370px; 
    border: 1px solid #ccc; 
} 

.left { 
    float: left; 
    border: 1px solid blue; 
} 

<div class="left">Not #map_canvas</div> 
<div id="map_canvas" class="left">This is #map_canvas .left</div>

http://jsfiddle.net/94dwn/3/

。注意，元件的宽度支配的它的浮到下一“行”，如果“下一个”元件是不是“清除”，因此，如果一个元素是显示窄于之前的float ed元素，它可能会到该元素的右侧/左侧。在这种情况下，您应该使用clear。

<div class="left">Not #map_canvas</div> 
<div id="map_canvas" class="left">This is #map_canvas .left</div> 
<div class="cleared">Clear</div> 

#map_canvas { 
    width: 500px; 
    height: 370px; 
    border: 1px solid #ccc; 
} 
.left { 
    float: left; 
    border: 1px solid blue; 
} 
.cleared { 
    clear: both; 
    background: green; 
    border: 1px solid blue; 
    color: white; 
}

http://jsfiddle.net/94dwn/4/

来源

2012-01-01 00:55:26

所有的ID必须是唯一的。使用哈希在你的CSS按ID样式应用到一个独特的元素：

#unique { font-size: 200px; } 

<div id="unique">My Unique one of a kind element</div>

当你想多个元素使用类应用样式：

.BoldRed { font-weight: bold; color: red; } 

<div class="BoldRed">This is important</div> 
<div class="BoldRed">So is this</div>

您也可以结合类：

.ReallyImportant { text-decoration: underline; } 

<div class="BoldRed ReallyImportant">This is the most important</div>

来源

2012-01-01 01:04:09

如何在使用ID时应用CSS样式？

回答

相关问题