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;
}

那么如何为<div id="menu">和<div id="Div1">使用相同的“＃menu”样式？

Answer 1

您可以定位两个元素：

#menu, #Div1 {

但更干净的方法可能是使用类来设置属性：

.default_menu {

并将该类提供给两个元素：

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

类独立于特定元素，通常是更好的选择。尽可能使用类，仅在非常非常特殊的独特元素情况下使用ID。

您还可以将多个类（根据需要）分配给一个元素：

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

如果同时在default_menu和menu_big设置了属性，menu_big的设置将覆盖第一个。

Answer 2

使用类似的类（您可以将名称.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 3

使用课程

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

在你的CSS中

.menu {...}

或同时定位两个div

#menu, #Div1 {
    ....
}

Answer 4

对于可重用的样式，您必须使用类而不是ID：

<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;
}

Answer 5

您可以尝试定位两个div：

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

我该如何复制CSS样式？

5 个答案: