html - 在CSS中覆盖子类中的父设置

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 将比现有规则更具体，因此应该可行。