css - 使某个图像不受img css的影响

Question

我的页面上有这个 CSS。

img {
  opacity:0.4;
  filter:alpha(opacity=40);
}

img:hover {
  opacity:1;
  filter:alpha(opacity=100);
}

我想要一些不受此影响的图像opacity。我将如何实现这一目标？

Answer 1

最好的方法是给它一个唯一的ID 并单独定位它：

img#theID { 
// CSS for that particular image here
}

Answer 2

方法一

完成此类事情的最流行方法建议使用特异性。基本上，选择器越具体，优先级越高。考虑这个标记

<section>
  <div class="container">
    <img src="blahblah.jpg" />
    <div class="wrap">
      <img src="blahblahblah.jpg">
    </div>
  </div>
<section>
<img>
<img>

如果你使用

img {
  /* Styles */
}

这些样式将应用于所有人。但是如果你使用这样的东西

section .container .wrap img {
  /* Different Styles */
}

这些样式将优先于该图像，因为 CSS 喜欢您可以给出的最具体的答案。

方法二

除了user125697给出的这个答案，它建议使用 id

/* img#ID - ID can be whatever you want*/
img#hover {
  opacity:1;
  filter:alpha(opacity=100);
}

你会这样暗示它

<img id="hover" src="blahblah.jpg" />

Chris Coyier 曾就此发表过一篇文章。要测试结果，只需从框中删除其中一个类，您就会看到它改变了颜色。所以基本上类总是被ID覆盖

方法三

不鼓励

我知道的最后一种方法是使用!important，它会覆盖页面上的每种样式。无论。这是非常不赞成的，因为它会在未来产生很多问题。