html - CSS Style 携带问题

Question

我有一个 css 错误，我似乎无法定位。我在一个 asp 网站上遇到了这个问题。我有一个导航栏，我有一些样式(你不是很好)。我的导航栏样式也用于我对表单条目执行的任何验证，但我不确定为什么。我在下面展示了两个不同页面的示例:

这是我尝试更改密码的页面，返回的错误是正确的，但样式不仅仅是红色的“危险文本”，而是与我的导航栏具有相同的格式。

注册页也是一样的，不过也有很大的空白

这是我用于管理密码页面的代码

<%@ Page Title="Manage Password" Language="C#" MasterPageFile="~/SyntherMaster.Master" AutoEventWireup="true" CodeBehind="ManagePassword.aspx.cs" Inherits="ComputingProjectwh.Account.ManagePassword" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
    <div class="form-horizontal">
        <section id="passwordForm">
            <asp:PlaceHolder runat="server" ID="changePasswordHolder" Visible="true">
                <div class="form-horizontal">
                    <h4>Change Password Form </h4>
                    <hr />
                    <%-- Here a validation summary command shows any errors that occur furing the process of changing the password --%>
                    <asp:ValidationSummary runat="server" ShowModelStateErrors="true" CssClass="text-danger" />
                    <div class="form-group">
                        <%-- Here a label and textbox used so that the user can enter their current password and the input is controlled and confirmed in the backing code, the associatedcontrol id is the id of the input to validate--%>
                        <asp:Label runat="server" ID="CurrentPasswordLabel" AssociatedControlID="CurrentPassword" CssClass="col-md-2 control-label">Current password</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="CurrentPassword" TextMode="Password" CssClass="form-control" />
                            <%-- Here a validator cnfirms that the user has entered something into the box, whether it is correct or not will be confirmed in the backing code --%>
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="CurrentPassword"
                                CssClass="text-danger" ErrorMessage="The current password field is required."
                                ValidationGroup="ChangePassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <asp:Label runat="server" ID="NewPasswordLabel" AssociatedControlID="NewPassword" CssClass="col-md-2 control-label">New password</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="NewPassword" TextMode="Password" CssClass="form-control" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="NewPassword" CssClass="text-danger" ErrorMessage="The new password is required." ValidationGroup="ChangePassword" />
                            <%-- Because the password is being changed, the password needs to be validated to confirm that it is suitable and follows the same rules as on the register page --%>
                            <asp:RegularExpressionValidator ID="PasswordValidator" runat="server" ErrorMessage="Invalid Password" ControlToValidate="NewPassword" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"></asp:RegularExpressionValidator>
                        </div>
                    </div>
                    <div class="form-group">
                        <asp:Label runat="server" ID="ConfirmNewPasswordLabel" AssociatedControlID="ConfirmNewPassword" CssClass="col-md-2 control-label">Confirm new password</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="ConfirmNewPassword" TextMode="Password" CssClass="form-control" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmNewPassword"
                                CssClass="text-danger" Display="Dynamic" ErrorMessage="Confirm new password is required."
                                ValidationGroup="ChangePassword" />
                            <%--  Here a compare validator is used in order to confirm the the user typed the password correctly by ensuring that they can type it twice --%>
                            <asp:CompareValidator runat="server" ControlToCompare="NewPassword" ControlToValidate="ConfirmNewPassword" CssClass="text-danger" Display="Dynamic" ErrorMessage="The new password and confirmation password do not match." ValidationGroup="ChangePassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <%-- Here a button is used in order to start the code behing of the page and to get it to perform the tasks it needs to --%>
                            <asp:Button runat="server" Text="Change Password" ValidationGroup="ChangePassword" OnClick="ChangePassword_Click" CssClass="btn btn-default" />
                        </div>
                    </div>
                </div>
            </asp:PlaceHolder>
        </section>
    </div>
</asp:Content>

这是注册页面的代码:

<%@ Page Title="Register" Language="C#" MasterPageFile="~/SyntherMaster.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="ComputingProjectwh.Account.Register" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <h2><%: Title %>.</h2>
    <p class="text-danger">
        <asp:Literal runat="server" ID="ErrorMessage" />
    </p>

    <div class="form-horizontal">
        <h4>Create a new account</h4>
        <hr />

    </div>
    <div class="form-group">
        <%-- This section is a a labbelled textbox used for the input of the user desired password, it is validated to ensure that
             something is entered and also by REGEX that it has at least one upper and lower case letteras well as a number and a symbol --%>
        <asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
                CssClass="text-danger" ErrorMessage="The password field is required." />
            <asp:RegularExpressionValidator ID="PasswordValidator" runat="server" ErrorMessage="Passwords must contain at least one upper and lower case character, be at least 8 characters in length and also contain one special character" ControlToValidate="Password" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%-- This section is a a labbelled textbox used for the input of the user desired password, it is validated to ensure that
             something is entered and also by REGEX that it has at least one upper and lower case letteras well as a number and a symbol.
                     The entered password is compared with the first password entry to ensure that the two are the same --%>
        <asp:Label runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
                CssClass="text-danger" Display="static" ErrorMessage="The confirm password field is required." />
            <asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                CssClass="text-danger" Display="static" ErrorMessage="The password and confirmation password do not match." />
            <asp:RegularExpressionValidator ID="ConfirmPasswordValidator" runat="server" CssClass="text-danger" ErrorMessage="Passwords must contain at least one upper and lower case character, be at least 8 characters in length and also contain one special character" ControlToValidate="ConfirmPassword" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
                <%-- This section is a a labbelled textbox used for the input of the user desired username, it is validated to ensure that
             something is entered and also by REGEX to ensure that it is suitable --%>
        <asp:Label runat="server" AssociatedControlID="Username" CssClass="col-md-2 control-label">Username</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Username" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Username"
                CssClass="text-danger" ErrorMessage="The Username field is required." />
            <asp:RegularExpressionValidator ID="UsernameValidator" runat="server" CssClass="text-danger" ErrorMessage="Usernames mcut be 3-15 characters long and cannot contain special characters" ControlToValidate="Username" ValidationExpression="^[a-z0-9_-]{3,15}$"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%-- This section is a a labbelled textbox used for the input of the user desired email, it is validated to ensure that something is entered and that it matches email format by REGEX --%>
        <asp:Label runat="server" AssociatedControlID="Email" CssClass="col-md-2 control-label">Email</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Email" CssClass="form-control" TextMode="Email" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
                CssClass="text-danger" ErrorMessage="The email field is required." />
            <asp:RegularExpressionValidator ID="EmailValidator" runat="server" CssClass="text-danger" ErrorMessage="RegularExpressionValidator" ControlToValidate="Email" ValidationExpression=""></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%--  This section is a simple data entry, validated by REGEX and asp to ensure that something is entered and the date is suitable and in the correct format --%>
        <asp:Label runat="server" AssociatedControlID="DateOfBirth" CssClass="col-md-2 control-label">Date of birth</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="DateOfBirth" CssClass="form-control" TextMode="Date" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="DateOfBirth" CssClass="text-danger" ErrorMessage="Please enter a valid date." />
            <asp:RegularExpressionValidator ID="DateOfBirthValidator" runat="server" CssClass="text-danger" ErrorMessage="RegularExpressionValidator" ControlToValidate="DateOfBirth" ValidationExpression="^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$"></asp:RegularExpressionValidator>
        </div>
    </div>
    <div class="form-group">
        <%-- Text box for first name entry, this field is required but not validated --%>
        <asp:Label runat="server" AssociatedControlID="Firstname" CssClass="col-md-2 control-label">First Name</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Firstname" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Firstname"
                CssClass="text-danger" ErrorMessage="Please enter your first name." />
        </div>
    </div>
    <div class="form-group">
                <%-- Text box for surname entry, this field is required but not validated --%>
        <asp:Label runat="server" AssociatedControlID="Surname" CssClass="col-md-2 control-label">Surname</asp:Label>
        <div class="col-md-10">
            <asp:TextBox runat="server" ID="Surname" CssClass="form-control" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="Surname"
                CssClass="text-danger" ErrorMessage="Please enter your Surname." />
        </div>
    </div>
    <div class="form-group">
        <%-- This button is used to trigger the code to submit the users data and to create a new user--%>
        <div class="col-md-offset-2 col-md-10">
            <asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />

        </div>
    </div>
    <asp:ValidationSummary runat="server" CssClass="text-danger" />

</asp:Content>

我也可以在后面添加 cs 但我不确定它是否相关，也许只有这一行:

    else 
    {//if any errors occur then they are returned to the user on the page, for example if a username already exists and is in use.
        ErrorMessage.Text = result.Errors.FirstOrDefault();
    }

这是我的 site.css 的当前状态:

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
        text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
        font-size: 12em;
        font-weight: bold;
        font-family: Helvetica;
    }
}
/*all of the below styling is used to create the navigation bar and to give it colour and style*/
li {
    border-right: 1px solid #ff6600;
    z-index: 299;
    position: relative;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #2B3533;
    border: 1px solid #ff6600;
    z-index: 299;
    position: relative;
}

    ul li {
        display: block;
        position: relative;
        float: left;
        background: #2B3533;
        z-index: 299;
        position: relative;
    }

li ul {
    display: none;
    z-index: 299;
    position: relative;
}

ul li a {
    display: block;
    padding: 1em;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    z-index: 299;
    position: relative;
}

li:hover > ul {
    display: block;
    position: absolute;
    z-index: 992;
}

li:hover li {
    float: none;
    z-index: 992;
    position: relative;
}

li:hover a {
    background: #2B3533;
    z-index: 992;
    position: relative;
}

li:hover li a:hover {
    background: #ff6600;
    z-index: 992;
    position: relative;
}

.main-navigation li ul li {
    border-top: 0;
    z-index: 299;
    position: relative;
}

ul li a:hover {
    background: #ff6600;
    z-index: 299;
    position: relative;
}

ul ul ul {
    left: 100%;
    top: 0;
    z-index: 299;
    position: relative;
}

ul:before,
ul:after {
    content: " ";
    display: table;
    z-index: 299;
    position: relative;
}

ul:after {
    clear: both;
    z-index: 992;
    position: relative;
}

.main-navigation > li > a {
    display: block;
    padding: 1em;
    text-decoration: none;
    white-space: nowrap;
    color: white;
    z-index: 299;
    position: relative;
}

.shadowing {
    color: #fff;
    font-size: 12em;
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
    margin-top: 20px;
}

.shadowing {
    text-align: center;
}

Answer 1

导航中的链接和错误具有相同的样式，但看起来不一样？那是问题所在吗？好吧，导航元素是链接，它们有它们的样式，但错误不是链接？也许使用该错误代码类创建另一个 CSS 元素并将样式粘贴到那里。