Как я могу продублировать стиль CSS?

Question

В файле .master у меня есть ...

<div id="menu">
    <ul>
        <li class="1"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
    </ul>
</div>
<div id="Div1">
    <ul>
       <li class="1"><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

и в файле css у меня есть

#menu {
    width: 940px;
    height: 49px;
    margin: 0 auto;
    padding: 0;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

Так как же использовать один и тот же стиль "# menu" для <div id="menu"> И <div id="Div1">?

Answer 1

Вы можете выбрать оба элемента:

#menu, #Div1 {

но, возможно, более чистый способ - использовать класс для установки свойств:

.default_menu { 

и присвоение этого класса обоим элементам:

<div id="menu" class="default_menu">
 ......
<div id="Div1" class="default_menu">

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

Вы также можете назначить несколько классов - столько, сколько хотите - одному элементу:

<div id="menu" class="default_menu menu_big">

если свойство было установлено в default_menu и menu_big, значение из menu_big переопределит первое.

Answer 2

Либо используйте класс

<div class="menu">...</div>

А в твоем css

.menu {...}

ИЛИ цель оба дива

#menu, #Div1 {
    ....
}

Answer 3

Используйте классы вроде (вы можете изменить имя .menu на что-то, что имеет смысл для двух div'ов):

.menu {
    width: 940px;
    height: 49px;
    margin: 0 auto;
    padding: 0;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

И

<div class="menu" id="menu">
    <ul>
        <li class="1"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
    </ul>
</div>
<div class="menu" id="Div1">
    <ul>
        <li class="1"><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

Answer 4

Вы можете попробовать и нацелить оба div'а:

div#menu, div#Div1 {
    css goes here
}

Answer 5

Вы должны использовать классы вместо идентификаторов для этих повторно используемых стилей:

<div id="menu" class="menu">
    <ul>
        <li class="1"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
    </ul>
</div>
<div id="Div1" class="menu">
    <ul>
        <li class="1"><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

И css:

.menu {
    width: 940px;
    height: 49px;
    margin: 0 auto;
    padding: 0;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}