我的理解是,类应该用于整个网站中出现的元素,而ID应该用于真正独特的元素。 我有一个建立在地图平台上的网站。主页#map上有一个div,它实际上是整个网站的前端。所以我玩了并编辑了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
答案 0 :(得分:3)
元素ID在一个页面中只需要是唯一的。如果你在不同的页面上有相同的ID,那么只要每个页面只有一个具有该ID的元素,你就不会做错任何事情,无论这个元素是什么元素。
要仅在#map
内选择#report-map
时,请使用:
#report-map #map { width: 300px; }