为什么我的母版页中没有出现某些css属性？

Question

我在非母版页面上有一个看起来像这样的按钮

现在我有一个母版页，在内容占位符内部我有一个div标签，在其中我写了该特定页面的内容，该标签内的按钮看起来像这样

现在它们具有相同的css属性，但它们不会出现在主页面1中，这里是div标签和按钮的代码

.container-div 
{
    position:absolute;
    padding-top:8%;
    padding-left:10%;
    padding-right:10%;
    max-height:80%;
    z-index:0;
    font-family:Calibri;

}

#buttons {
    position:absolute;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor:pointer;
    z-index:20;
}

#buttons:hover {
    background-color:cadetblue;
}

这是html代码

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div id="placeHolderDiv" class="container-div" runat="server">

    <asp:Button id="buttons" runat="server" Text="Cancel" CssClass="buttons" OnClick="cancel"/>


</div>

Answer 1

将CSS类从#buttons更改为.buttons 因为在母版页下生成的ID将不是完全按钮，但会有id准备结束。你可以检查来源。

.buttons {
    position:absolute;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor:pointer;
    z-index:20;
}

.buttons:hover {
    background-color:cadetblue;
}

Answer 2

有些编译器很难解析具有相同id的多个元素，id应该是唯一的。

更改为“class = buttons”，将css选择器更改为.buttons{};