更改列表项处于活动状态时的字体大小

Question

我有一个导航栏列表，当其中一个列表项处于活动状态时，我希望它的大小是其他列表项的两倍，以清楚地表明您所在的页面。但是，我当前的代码仅在单击鼠标时使其变大，而不是当您在页面上时如我所愿。我究竟做错了什么？.sellingmethodnav {  background-color: #3F51B5;  list-style: none;  text-align: center;}.sellingmethodnav li {  display: inline;}.sellingmethodnav a {  display: inline-block;  padding: 10px;  color: #f2f2f2;}.sellingmethodnav li:active {  font-size: 200%;  color: #f2f2f2;}<div class="sellingmethodnav">  <li><a href="./quoting_assistant.html" class="active">CPC</a></li>  <li><a href="../CPM/quoting_assistant_CPM.html">CPM</a></li>  <li><a href="../CPA/quoting_assistant_CPA.html">CPA</a></li>  <li><a href="../CPI/quoting_assistant_CPI.html">CPI</a></li>  <li><a href="../CPE/quoting_assistant_CPE.html">CPE</a></li>  <li><a href="../CPV/quoting_assistant_CPV.html">CPV</a></li>  <li><a href="../CPCV/quoting_assistant_CPCV.html">CPCV</a></li></div>

Answer 1

你可以试试这个：

超文本标记语言

<div class="sellingmethodnav">

 <li><a href="#" class="active">CPC</a></li>

 <li><a href="#">CPM</a></li>

 <li><a href="#">CPA</a></li>

 <li><a href="#">CPI</a></li>

 <li><a href="#">CPE</a></li>

 <li><a href="#">CPV</a></li>

 <li><a href="#">CPCV</a></li>

CSS

.sellingmethodnav a:active, .sellingmethodnav a:focus {

font-size: 200%;

color: #f2f2f2;

}

https://jsfiddle.net/tractionworks/nm934g5h/1/

这就是你想要的吗？