Question

我是HTML编码的新手，我有以下HTML元素：

<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，那么如何应用ID为left的CSS元素？

Answer 1

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

请注意，如果“next”元素没有“清除”，则元素的宽度控制它浮动到下一个“line”，因此如果元素的显示比之前的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/

Answer 2

所有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>

如何在获取ID时应用CSS样式？

2 个答案: