0

Web サイト全体に表示される要素にはクラスを使用し、真にユニークな要素には ID を使用する必要があることを理解しています。マッピング プラットフォーム上に構築された Web サイトがあります。ホームページ #map には div があり、これは実際にはウェブサイト全体の中心にあります。それで、ホームページでの見た目に満足するまで、CSS をいじって編集しました。

ただし、誰かがコンテンツ (レポートと呼ばれる) を追加すると、レポート ビューでも同じ div と id マップが使用されます。

同じ 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 は、1 つのページ内で一意である必要があるだけです。異なるページで同じ ID を使用している場合、各ページにその ID を持つ要素が 1 つだけ存在する限り、それがどの要素であっても問題ありません。

#map内で発生した場合のみ選択するには、次のようにし#report-mapます。

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