Question

我查看了W3学校网站W3Schools，该网站用CSS解释了样式按钮。我需要在单击时指定按钮样式。什么是伪类选择器？例如悬停按钮是：

.button:hover{ 
}

Answer 1

此按钮最初会显示为黄色。在悬停时，它将变为橙色。单击它时，它将变为红色。我用过：悬停和：专注于调整风格。（：主动选择器通常用于链接（即<a>标签））

＆＃13;

button{
  background-color:yellow;
}

button:hover{background-color:orange;}

button:focus{background-color:red;}

a {
  color: orange;
}

a.button{
  color:green;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:active {
  color: blue;
}

＆＃13;

<button>
Hover and Click!
</button>
<br><br>

<a href="#">Hello</a><br><br>
<a class="button" href="#">Bye</a>

＆＃13;

Answer 2

如果您只想在按下鼠标时按钮具有不同的样式，则可以使用:active伪类。

.button:active {
}

另一方面，如果您希望在点击后保留样式，则必须使用javascript。

Answer 3

按钮有三种状态

正常：您可以选择此button
悬停：您可以选择此button:hover
按下/点击：您可以选择此button:active

<强>正常：

.button
 {
     //your css
 }

有效

.button:active { //your css }

<强>悬停

.button:hover { //your css }

<强>片段：

使用:active设置按钮的活动状态的样式。

button:active{ background-color:red; }

<button>Click Me</button>

Answer 4

不幸的是，没有：点击伪选择器。如果要在单击时更改样式，则应使用Jquery / Javascript。它肯定比纯HTML / CSS的“黑客”更好。但如果你坚持......

input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
  background: #444;
  color: #fff;
}

  <label for="input">
  <input id="input" type="radio" />
  <span>NO JS styling</span>
  </label>

或者，如果您愿意，可以切换样式：

input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
  background: #444;
  color: #fff;
}

  <label for="input">
  <input id="input" type="checkbox" />
  <span>NO JS styling</span>
  </label>

Answer 5

按钮：当您将光标移到按钮上时，将鼠标悬停尝试按钮：激活代替...也适用于其他元素

button:active{
  color: red;
}

Answer 6

试试这个

＆＃13;

button:focus{
  background-color:red;
}

＆＃13;

<button>click me</button>

＆＃13;

如何设置CSS中单击按钮的样式

6 个答案: