Css 如何将webkit应用于每个图像

这可能是一个与div id和类相关的初学者问题，但我已经将webkit代码应用到我的CSS表中，并希望在图像到图像的基础上使用过滤器。我在划分过滤器时遇到问题，它们正在应用于我的所有图像。下面是我的代码：

CSS:

HTML:

<div id="img">
<a href="design.html">
  <img src="designwork.png"  width="100%" height="100">
<a href="travel.html">
  <img src="zurich.png" alt="fivera" width="100%" height="50">
<a href="graphics.html">
  <img src="graphics.png" alt="fivera" width="100%" height="50">
<a href="3dmodeling.html">
  <img src="3dmodeling.png" alt="fivera" width="100%" height="50">
</div>

---

谢谢您的帮助。

您需要使用css类。您可以向任何dom元素添加一个或多个类，例如

<img>, <div>, <p>

---

虽然这一评论会引起很多人的反对，但我建议浏览一下网站上的文档。它们很容易理解，并且会让你开始学习。

<img>, <div>, <p>

<img class="filter" src="designwork.png"  width="100%" height="100">

.filter { 
 -webkit-filter: brightness(18%);
 -webkit-transition: all 5s ease;
   -moz-transition: all 5s ease;
     -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
        transition: all 5s ease;
}