CSS中的鼠标按下选择器是什么？

Question

我注意到按钮和其他元素具有默认样式,并且有3个步骤:普通视图,悬停/焦点视图和mousedown/click视图,在CSS中我可以更改普通视图的样式和悬停视图,如下所示:

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

但我怎样才能选择mousedown？我想要这样的东西:

button:mousedown{
  //some styling
}

谢谢

Answer 1

我认为你的意思是活跃的状态

 button:active{
  //some styling
 }

这些是链接在CSS中可能具有的所有伪状态:

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */

另见:http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

Answer 2

我发现这个行为就像一个mousedown事件:

button:active:hover {}

Answer 3

Pro-tip注意:出于某种原因,CSS语法需要在相同元素之后的:active片段才能生效:hover

http://www.w3schools.com/cssref/sel_active.asp

Answer 4

我最近发现:active:focus在 css 中做同样的事情就像:active:hover你需要覆盖自定义 css 库一样，他们可能会同时使用两者。