如何定位 html 元素 class 名称而不是元素？

Question

我有这段代码，但它以所有<li>和<a>元素为目标，我怎样才能让它以 class 为目标而不是以元素为目标？

我想要完全相同的效果。

这是我的 html & css：

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F0E68C; } li { float: left; } li a { display: block; color: Black; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #FFD750;

 <nav> <ul> <li><a class="active" href="index.html">Home</a></li> <li><a href="boyshome.html">Boys Campus</a></li> <li><a href="girlshome.html">Girls Campus</a></li> <li><a href="calculator.html">GPA Calculator</a></li> </ul> </nav>

Answer 1

如果您不想定位所有li a元素而只定位特定的 class 名称，则可以改为：

li a.active {                 // or just a.active {...}
    display: block;
    color: Black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a.active:hover {
  background-color: #FFD750;

---

a.active {...}             // or just .active, this will target the class name

Answer 2

DOM 中的 select 和 HTML 元素有不同的方法。

• 你可以使用# select ids
• 您可以使用 select 节课.
• 你可以 select 所有带有标签的元素，比如li

这是一个例子：

<li id="first" class="listElement">First element</li>
<li class="listElement active">Second element</li>

#first {
    color: red;
}
.active {
    background: yellow;
}
.listElement {
    padding: 5px;
}

li {
    font-size: 14px;
}

Answer 3

您可以使用.<class>定位任何 class。 所以你可以这样做：

  .active {
      <Desired style definition>
   }

这将为 class active的所有元素添加样式。 另请注意，如果您想通过其 Id 定位任何元素，请使用#<id>而不是点.<class>