设置了一个div下有a都有hover效果,但想让其中几个没有hover效果？

Question

一个div下有很多个a标签，我给他们.div1下的a都设置hover效果，像no-hover的标签让他没有变化该怎么实现？

.div1 a:hover{
   color
}
<div class="div1">
   <div>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
   </div>
 <div>
      <a></a>
      <a></a>
      <a></a>
      <a class="no-hover"></a>
      <a class="no-hover"></a>
   </div>
 ........
</div>

Answer 1

.div1 a:not(.no-hover):hover{}

Answer 2

写一条规则覆盖之前的：

.div1 a.no-hover:hover {
  color: initial;
}

Answer 3

来试试：

.div1 a:hover{
   color: red;
}
.div1 a.no-hover:hover{
    color: inherit;
}
<div class="div1">
   <div>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
   </div>
 <div>
      <a></a>
      <a></a>
      <a></a>
      <a class="no-hover"></a>
      <a class="no-hover"></a>
   </div>
 ........
</div>