使div的“ a”项目不具有相同的CSS属性

Question

我想创建一个顶部菜单导航栏，并且想在左侧显示我的标题。但是现在当我的标题悬停时，它点亮了，我不想要那样。如何为特定的HTML元素具有不同的属性？我只希望它在悬停时不亮。

body {
  font-family: 'Roboto', sans-serif;
  background: #F9F9F9;
}

.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav label {
  color: white;
  padding: 14px 16px;
  font-size: 16pt;
  font-weight: 700;
}

.topnav a {
  display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background: #ddd;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #FF6138;
  color: black;
  font-weight: 700;
}

.topnav .loginnav {
  float: right
}

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

<div class="topnav">
  <a id="titleID" href="/">DDTech</a>
  <a id="homeID" href="/">Home</a>
  <a id="projectID" href="projects.html">Projects</a>
  <a id="contactID" href="contact.html">Contact</a>
  <a class="loginnav" href="#login">Login</a>
</div>

Answer 1

更改此规则：

.topnav a:hover {
    background: #ddd;
    color: black;
}

...对此：

.topnav a:not(#titleID):hover {
    background: #ddd;
    color: black;
}