单击时从按钮中删除轮廓答案

【问题标题】：remove outline from button when clicked单击时从按钮中删除轮廓
【发布时间】：2019-07-25 19:25:39
【问题描述】：

#hamburger-btn :focus :active{
outline: 0 !important;
border: 0 !important;
}

<button id="test">
  <div id="hamburger-btn">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>

我试图在单击时从汉堡包 btn 中删除蓝色轮廓，但它不起作用。我的html如下：

但是它不起作用

【问题讨论】：

标签： html css button border outline

【解决方案1】：

空格是descendant combinator，您不是在尝试定位按钮的后代，而是定位按钮本身。

从选择器中删除后代组合符。

另请注意，要添加 OR 条件，您需要使用 , 并重复两个部分之间共享的选择器的每个部分。

另外请注意，焦点应用到按钮而不应用到按钮内的 div，因此您需要首先定位正确的元素。

危险：焦点指示器是重要的辅助功能。不是每个人都可以或想要使用鼠标。他们可能需要知道文档中焦点的位置以便与之交互。重新考虑移除焦点的所有迹象。

不要这样做

#test:focus,
#test:active {
  outline: 0;
}

<button id="test">
            <div id="hamburger-btn">
            Needs content to be visible
                <span></span>
                <span></span>
                 <span></span>
                 <span></span>
            </div>
        </button>

【讨论】：

为危险部分点赞！