Question

我正在尝试制作“忘记密码？”在我的HTML中活跃的超链接。我网页的当前屏幕截图是http://prntscr.com/2q6mf8。所需的屏幕为http://prntscr.com/2q6mmr。这里“登录”是我全球“div”的类。我有以下HTML：

<div class="visible-xs sign-in">    

    <div id="login-form">


        <div class="login-form-header">
            <div class="logo-SI">
                <img src="/web/resources/localadventures/img/la_logo.png" />
            </div>
            <h2 class="page-title-SI green-bg">Local Adventures</h2>
        </div>

        <a href="#" class="login-form-control" style="position: relative; top: 4px;">Create an Account</a>
        <a href="#" class="login-form-control" style="position: relative; top: 4px;">Sign In</a>

        <input type="email" required value="Email Address" style="position: relative; top: 10px;" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
        <input type="email" required value="Password" style="position: relative; top: 10px;" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">

        <br>

        <div>
            <p align="right"><font color="green"><a href="" class="signin-form-control active" style="position: relative; left: 25px; top: 14px;">Forgot your password?</a></font></p>
        </div>

        <br>
        <span class='btn btn-lg btn-success btn-block'>Sign In</span>
        <span class='btn btn-lg btn-primary btn-block'>Facebook Sign In</span>

    </div> 

</div>

我的CSS如下：

@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

a {
    color: #2a2a2a;
    text-decoration: none;
    text-align: right;
    margin:1px 25;
}

a:hover { color: #88c425; }

.sign-in .fieldset {
    border: none;
    margin: 0;
}
.sign-in .btn-success {
 border-radius:0px;
 background-color: #88c425
}

.sign-in .btn-success:hover {
background-color: #88c425
}

.sign-in .btn-primary {
 border-radius:0px;
}

.sign-in input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    -webkit-appearance: none;
}

.sign-in input:focus {
  outline: none;
}

input[type="submit"] { cursor: pointer; }

.sign-in.clearfix { *zoom: 1; }
.sign-in.clearfix:before, .clearfix:after {
    content: "";
    display: table; 
}
.sign-in.clearfix:after { clear: both; }

/* ---------- LOGIN-FORM ---------- */

.sign-in #login-form {
    margin: 50px auto;
    width: 300px;
}

.sign-in #login-form h3 {
    background-color: #79a002;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: 14px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}

.sign-in #login-form fieldset {
    background: #fff;
    border-radius: 0 0 -1px -1px;
    padding: 0px;

}

.sign-in #login-form fieldset:before {
    background-color: #fff;
    content: "";
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px;
}

.sign-in #login-form input {
    font-size: 14px;
}

.sign-in #login-form input[type="email"], #login-form input[type="password"] {
    border:none; /* clear previous borders */
    border-bottom: 1px solid #88c425; /* add bottom border */
    padding: 12px 10px;
    width: 300px;
}

.sign-in #login-form input[type="email"] {
    border-radius: 3px 3px 0 0;
}

.sign-in #login-form input[type="password"] {
    border-top: none;
    border-radius: 0px 0px 3px 3px;
}

.sign-in #login-form input[type="submit"] {
    background: #1dabb8;
    border-radius: 3px;
    color: #fff;
    float: right;
    font-weight: bold;
    margin-top: 20px;
    padding: 12px 20px;
}

.sign-in.login-form-header {
    overflow:hidden; /* clearfix */    
    background:#88C425;
}

.logo-SI {
    float:left;
    top:-5px;
}

.page-title-SI {
    margin:0;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align: center;
    color:white;
    font-size: 24px;
    line-height:75px; /* height of the logo image to center text verticaly */
    margin-left:76px;
    position: relative;
    top:-5px;
}

.sign-in.login-form-controls {
    overflow:hidden;
}

.sign-in.login-form-control {
    display:block;
    float:left;
    width:50%;

}
.sign-in.signin-form-control{
    display:block;
    float:right;
    width:50%;
    color: #88c425;

}

.sign-in.login-form-control > span {
    display:block;
    padding:10px;
}

.sign-in.active.login-form-control {
    color:#88C425;
}

正如您所观察到的，我为“Forgot passowrd”添加了“活动”？ HTML中的超链接，这不起作用！我也尝试过编辑

.sign-in.signin-form-control{
    display:block;
    float:right;
    width:50%;
    color: #88c425;

}

通过在样式中添加“a”在CSS中

。似乎没什么用。我希望链接在页面加载后以绿色显示。需要做些什么改变才能解决这个问题？

Answer 1

这个CSS选择器：

.sign-in.active.login-form-control

与HTML元素的类不匹配：

<a class="signin-form-control active">Forgot your password?</a>

似乎选择器应该是：

.signin-form-control.active

Working Example (jsFiddle)

超链接“主动”风格不起作用？

1 个答案: