0

我的理解是类应该用于将出现在整个网站中的元素，而 ID 应该用于真正独特的元素。我有一个建立在地图平台上的网站。主页#map 上有一个 div，它确实是整个网站的前端 n 中心。所以我玩弄并编辑了 CSS，直到我对它在主页上的外观感到满意为止。

但是，当有人添加内容（称为报告）时，报告视图也使用带有 id 映射的相同 div。

是否可以以不同的方式操作相同 ID 的 div？主页上的地图是 700px，而报告页面上的地图应该是 300px 左右。

主页上的地图html是：

<div class="map " id="map"></div>
<div id="mapStatus">
    <div id="mapScale"></div>
    <div id="mapMousePosition"></div>
    <div id="mapProjection"></div>
    <div id="mapOutput"></div>
</div>
<!-- / map --><div class="slider-holder">
    <form action="https://example.com/main" method="get">
        <input type="hidden" value="0" name="currentCat" id="currentCat"/>
        <fieldset>
            <label for="startDate">From:</label>
            <select name="startDate" id="startDate"><optgroup label="2013"><option value="1375329600" selected="selected" >Aug 2013</option><option value="1378008000">Sep 2013</option><option value="1380600000">Oct 2013</option></optgroup></select>
            <label for="endDate">to:</label>
            <select name="endDate" id="endDate"><optgroup label="2013"><option value="1378007999">Aug 2013</option><option value="1380599999">Sep 2013</option><option value="1383278399" selected="selected" >Oct 2013</option></optgroup></select>
        </fieldset>
    </form>
</div>

报告页面上围绕地图的 html 是：

<div id="report-map" class="report-map">
                <div class="map-holder" id="map"></div>
        <ul class="map-toggles">
          <li><a href="#" class="smaller-map">Smaller map</a></li>
          <li style="display:block;"><a href="#" class="wider-map">Wider map</a></li>
          <li><a href="#" class="taller-map">Taller map</a></li>
          <li><a href="#" class="shorter-map">Shorter Map</a></li>
        </ul>
        <div style="clear:both"></div>
            </div>
        </div>

我尝试使用选择器

#report-map, .report-map {width: 300px;}覆盖但没有成功。

谁能看到我怎么能做到这一点？我需要主页上的主地图保持 700px，报告页面上的地图保持 300px。

如果有人想看，该网站就在这里：http: //tinyurl.com/c8djrvr

4

1 回答 1

3

元素 ID 只需在一页内唯一。如果您在不同的页面上具有相同的 ID，那么只要每个页面都有一个具有该 ID 的元素，无论可能是哪个元素，您都不会做错任何事情。

要#map仅在它出现在中时选择#report-map，只需使用：

#report-map #map { width: 300px; }
于 2013-10-05T14:26:06.367 回答