Question

我想在点击后更改href的颜色。我只能为其中一个链接使用active属性。我还使用了链接的a:visited属性，但这会改变所有颜色的颜色。

分页代码

<div class="centerPagination">
    <div class="pagination">
        <a href="#">&laquo;</a>
        <a href="#" class="active">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">&raquo;</a>
    </div>
</div>

CSS

/* Pagination */
.centerPagination {
text-align: center;
}

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 10px 10px 10px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid black;
background-color: white;
height: 6.5px;
padding-top: 5px;
border: 1px solid black;
}

.pagination a.active {
background-color: #317D82;
color: white;
border: 1px solid black;
}

.pagination a:hover:not(.active) {
background-color: #FFFACD; 
}

/* .pagination a:visited {
 background-color: #317D82;
} */

.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.pagination a:last-child {
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
}

Answer 1

如果我在一个足够小的网站上工作，我有时会添加一个自定义的selected课程。

示例css类：

.nav li.selected a {
    color: #99B2FF;
    font-weight: 700;
}

..然后根据页面编辑在html导航栏中添加所选类的位置。

示例html：

<ul class="nav">
    <li><a href="index.html">In Brief</a></li>
    <li><a href="about.html">About</a></li>
    <li class="selected"><a>Money</a></li>  <!---selected--->
    <li><a href="workjack.html">Work</a></li>   
    <li><a href="sportscolm.html">Sport</a></li>
    <li><a href="culturejack.html">Culture</a></li> 
    <li><a href="lifestylerachel.html">Lifestyle</a></li>
    <li><a href="environmentcolm.html">Environment</a></li>         
</ul>

以上示例用于小组学院项目。它仍然有一个有效链接，因此您可以take a look here

Answer 2

如果您想要更改而点击链接：选择:active伪类。

如果要在之后更改颜色，请单击该链接，请使用:visited伪类。如果你改变你的锚点，所以它们都有不同的href，它们将避免同时进入:visited状态。

如何使用CSS3单击分页时更改链接的颜色

2 个答案: