Question

我有这个代码，我正在使用CSS。由于某种原因，课程不会改变段落的颜色，我不确定为什么。

<div id="formsHead">
    <div id="loginT" class="active">
        <p id="loginL">Login</p>
    </div>
    <div id="registerT" class="active">
        <p id="registerR">Register</p>
    </div>
</div>

#loginT{
    float:left;
    width:50%;
    height:100%;
}
#registerT{
    float:left;
    width:50%;
    height:100%;
}
.active{
    background:#ecf0f1;
}
.active p{
        color:#34495e;
}

以下是完整代码的jsFiddle：

http://jsfiddle.net/nvmzygqg/

Answer 1

您的选择器需要更具体。在您的示例中，它被#formsHead p选择器覆盖。在示例中添加每个父项的ID将起到作用：

#loginT.active p,
#registerT.active p {
    color: #34495e;
}

Answer 2

我建议做这样的事情：

p.active{
background:#ecf0f1;
color:#34495e;
}

默认情况下，这会将类应用于所有段落。

Answer 3

也许

.active:active{background-color:blue;}

或者它可能是你想要的焦点？

.active:focus{background-color:red;}

CSS类不改变字体颜色

3 个答案: