Управление элементами с одинаковым идентификатором по-разному на разных страницах

Question

Управление элементами с одинаковым идентификатором по-разному на разных страницах

0

Я понимаю, что классы должны использоваться для элементов, которые будут отображаться на веб-сайте, тогда как идентификаторы должны быть для действительно уникальных элементов. У меня есть сайт, основанный на картографической платформе. На главной странице #map находится div, который является действительно фронт-н-центром всего веб-сайта. Поэтому я играл и редактировал CSS, пока я не был доволен тем, как он выглядел на домашней странице.

Но когда кто-то добавляет контент (называемый отчет), в представлении отчета также используется тот же самый div с картой id.

Можно ли по-разному манипулировать divs того же ID? Карта на домашней странице - 700 пикселей, тогда как на страницах отчета должно быть около 300 пикселей.

Карта 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;} для переопределения, но без успеха.

Может ли кто-нибудь увидеть, как я могу это сделать? Мне нужна основная карта на домашней странице, чтобы она оставалась на 700 пикселей, а карта на страницах отчетов составляла 300 пикселей.

Сайт здесь, если кто-то хочет заглянуть: http://tinyurl.com/c8djrvr

Doug Fir 05 окт. 2013, в 17:10

Источник

Теги:

html

css

css-selectors

1 ответ

Ещё вопросы

BoltClock · Accepted Answer · 2013-10-05T13-10-00.000Z

Идентификатор элемента должен быть уникальным только на одной странице. Если у вас одинаковый идентификатор на разных страницах, вы не делаете ничего плохого, поскольку каждая страница имеет ровно один элемент с этим идентификатором, независимо от того, какой элемент может быть.

Чтобы выбрать #map только тогда, когда он встречается в #report-map, просто используйте:

#report-map #map { width: 300px; }

Блестящий, спасибо, что приняли в скором времени и будут помнить разъяснения о том, как работают идентификаторы