html - :active selector of tag without href attribute

Question

我像这样使用 Bootstrap 分页:

<ul class="pagination">  
<li class="page-item"><a class="page-link" >1</a></li>
<li class="page-item"><a class="page-link" >2</a></li>
<li class="page-item"><a class="page-link" >3</a></li>
<li class="page-item"><a class="page-link" >4</a></li>
<li class="page-item"><a class="page-link" >5</a></li></ul>

我想改变事件元素的边框颜色，我使用 :active 选择器:

a:active {
border: solid 2px #f51d19;}

但是 :active 选择器不起作用。

如何使用没有 href 属性的标签更改事件元素？

Answer 1

使用<a>这样锚定:

<a href='#/'>LINK</a>

添加/那里🠉

只需添加一个 /在 href 的末尾# 的值您将拥有伪类调用的正常行为，而无需跳转。

片段

html,
body {
  width: 100%;
  height: 100%;
}
.top {
  height: auto;
  width: 300px;
  background: red;
  color: #fff;
  text-align: center;
}
hr:first-of-type {
  margin: 10px auto;
}
hr {
  background: #FFF;
  margin: 50px auto;
}
a {
  text-decoration: none;
}
a:link {
  color: blue;
}
a:visited {
  color: green;
}
a:hover {
  color: red;
}
a:hover:after {
  color: black;
  content: ' and is HOVERed over';
}
a:active {
  color: magenta;
  text-decoration: underline;
}
a:active:after {
  color: black;
  content: ' and is ACTIVE until you release your mouse button'
}

<div class='top'>
  <h1>TOP</h1>
  <hr>
  <h2>Scroll to the bottom</h2>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
  <hr>
</div>
<a href='#'>LINK will jump</a>
<br/>
<br/>
<a href='#/'>LINK will NOT jump</a>
<br/>
<br/>
<br/>