Question

这困扰了我一段时间，尝试了一切，但没有好的解决方案。

在我的样式表中

.message input[type='submit'] {
    background-color: grey;
    color: #d5d5d5; 
    cursor: pointer;
    font: 13px/30px Arial, Helvetica, sans-serif;
    height: 40px;
    min-width: 120px;
    border: 0;
    margin: 10px 10px 0 0;
    font-weight:bold;
}
.tool {
    background-repeat: no-repeat;
    background-size:40px 40px;
    height: 50px;
    width: 50px;
    min-width: 50px;
    border: 0px;
    background-color: #fff;
    cursor: pointer;
    outline: 0;
    margin: 0 0 0 0;
}

.message样式所有（文本）提交表单中的按钮看起来不错，第二个样式（图标）工具按钮。所以现在当我有一个包含两种类型按钮的表单时，我尝试在工具按钮上设置类，但.message设置优先。

<form class="message">
    <input type="submit">OK</submit>
    <input type="submit" class="tool"/>
</form>

如何让子类覆盖父设置。我知道我可以使用id，但我试图避免这种情况。

我已经尝试了，

.message .tool {...}

但没有成功，

Answer 1

通常，浏览器使用他们可以找到的最具体的规则。 .message input[type='submit']比.tool甚至.message .tool更具体。 .message input[type='submit'].tool比现有规则更具体，因此应该有效。

在css中覆盖子类中的父设置

1 个答案: