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

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">&nbsp;<li><a href="#" class="active">CPC</a></li>&nbsp;<li><a href="#">CPM</a></li>&nbsp;<li><a href="#">CPA</a></li>&nbsp;<li><a href="#">CPI</a></li>&nbsp;<li><a href="#">CPE</a></li>&nbsp;<li><a href="#">CPV</a></li>&nbsp;<li><a href="#">CPCV</a></li>CSS.sellingmethodnav a:active, .sellingmethodnav a:focus {font-size: 200%;color: #f2f2f2;}https://jsfiddle.net/tractionworks/nm934g5h/1/这就是你想要的吗？