单击时从按钮中删除轮廓

Question

#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>

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

但是它不起作用

Answer 1

space 是 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>

单击时从按钮中删除轮廓

remove outline from button when clicked

html

css

border

button

outline