Question

我读了这篇:focus和:active之间的区别的文章， What is the difference between :focus and :active? 从这一点我知道，单击按钮时，:focus:active属性将被应用。但是，如果我单击时不希望将为:focus定义的任何属性应用于:active状态，该怎么办？说我有3个按钮，这是CSS：

button { color: black; }
  button:focus {   outline: 0;
    text-decoration: underline;
    box-shadow: 0 2px 4px 0 rgba(33, 43, 49, 0.5); }
  button:active {   background-color: #000;
    border-color: #fff;
    color: #fff;
    text-decoration: none;
    box-shadow: none;}

现在当我单击并单击后释放鼠标时，我希望box-shadow和text-decoration都不显示，但是在单击时释放鼠标后它仍然显示，这是预期的行为吗？ :focus和:active psedo元素

http://jsfiddle.net/c8txd4e5/

请有人能启发我吗？谢谢

Answer 1

是的，这是预期的。 :active在链接被单击时即即在鼠标键被按下时应用。只要元素处于焦点，:focus就会应用，该时间通常从元素首次处于活动状态开始一直持续到您将焦点移到页面上的其他位置并再次单击其他位置，即{{1} }等。

在您的示例中，听起来您根本不想将TAB和text-decoration放在box-shadow伪元素上；如果您这样做了，如您所注意到的，这些样式将在您释放鼠标按钮后保留，因为该链接仍然处于焦点状态，尽管它不再处于活动状态。因此，我认为您只是想像这样使用:focus伪元素：

:active

：active和：focus是否适用于鼠标单击？ -CSS

1 个答案: