Css 为什么即使我设置了按钮的：焦点：活动样式，按钮仍会更改其背景色？

我的Less代码如下：

.btn(@width: 80px, @height: 36px, @radius, @font-size: 14px, @font-color, @color) {

    ...

    background-color: @color;
    &:focus, &:active {
        background-color: darken(@color, 10%);
        outline: none;
    }
}
.btn {
    .btn(5.8rem, 2.6rem, 0.5rem, 1.2rem, #fff, @c-blue);
}
.btn.disabled {
    background-color: @c-gray;
    &:focus, &:active {
        background-color: @c-gray;
    }
}

当我使用

按钮时，它将按预期运行。但是如果我使用
按钮
，当我单击按钮时，它仍然会更改
背景色

真奇怪！只有当我使用移动仿真时才会发生这种情况

浏览器是“Mozilla/5.0（X11；Linux x86_64）AppleWebKit/537.36（KHTML，像Gecko）Ubuntu Chromium/37.0.2062.120 Chrome/37.0.2062.120 Safari/537.36”

模拟时，

“Mozilla/5.0（iPhone；CPU iPhone OS 7_0，如Mac OS X；en us）AppleWebKit/537.51.1（KHTML，如Gecko）版本/7.0 Mobile/11A465 Safari/9537.53”

已编译的CSS：

.btn {
    display: inline-block;
    width: 5.8rem;
    height: 2.6rem;
    line-height: 2.6rem;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    background-color: #4099de;
    border-radius: .5rem;
    border: none;
    cursor: pointer
}
.btn:focus, .btn:active {
    background-color: #2380c8;
    outline: none
}
.btn.disabled {
    background-color: #9ba6ae
}
.btn.disabled:focus, .btn.disabled:active {
    background-color: #9ba6ae
}

使用：

尝试设置（

）和样式按钮的

禁用状态，如下所示：

.btn[disabled] { background-color: #9ba6ae; }

它现在应该不受用户活动的影响，并根据需要设置样式。
..有关设置禁用表单元素样式的详细信息。
能否提供编译后的.btn和.btn.disabled元素的CSS代码？您是否有任何媒体查询覆盖此手机CSS？没有。我测试了其他浏览器，firefox工作正常，一些手机浏览器也可以。所以，也许是铬的问题。谢谢你的帮助。它很有效，我认为它指出了关键点。谢谢你的帮助。但是@Bass Jobsen的答案正是我想要的。
.btn[disabled] { background-color: #9ba6ae; }