具有ID

Question

之间有区别吗？

ul#mainNav li a:active {
    color: #0312a4;}

和

 ul#mainNav li.active a {
color: #0312a4;}

？据我所知，他们做同样的事情。

Answer 1

是否存在差异

ul #mainNav li a：active {     颜色：＃0312a4;}

在此，active是一个伪类。当事件发生时，它会将颜色应用于a，例如点击并按住（例如：链接，访问，悬停，活动等等...是伪类，并始终以:开头） 和

ul #mainNav li.active a { 颜色：＃0312a4;}

在此，active是一个类。（当父元素li标记仅有active类时，颜色将应用于锚标记。）

Answer 2

是的，两者完全不同。请检查下面的代码片段，它会显示您与众不同之处。点击第一个文字，这样它就会显示绿色。

a:active表示锚标记处于活动状态且li.active类“有效”设置为li标记。

ul#mainNav li.active a {
  color: red;
}

ul#mainNav li a:active {
  color: green;
}

<ul id="mainNav">
  <li><a>Click Here</a></li>    
  <li class="active"><a>Click Here</a></li>    
</ul>