CSS输入(按钮)边界特异性

Question

CSS输入(按钮)边界特异性

据我了解,类应该优先于样式而不是元素样式.我试过的风格button,input[type=button]和input[type=submit],发现与input(button和submit)时,border从元素风格,将优先于border样式类.但是,我没有注意到这个行为button.

这是一个展示情况的例子:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        input[type=button], button {
            border: none;
        }

        .class {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="button"  class="class" value="With class" />
    <input type="button" value="Without class" />
    <button class="class">With class</button>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

以上呈现如下:

我注意到Safari,Firefox和Chrome中的行为相同.

难道我做错了什么？在这种情况下,我是否误解了特异性？这border只是特定的吗？