使某个图像不受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

方法1

实现此类目标的最流行方法表明使用特异性。基本上，选择器越具体，优先级越高。考虑这个标记

<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喜欢您能给出的最具体的答案。

方法2

除user125697给出的答案外，建议使用id's

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

你会这样恭维它

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

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

方法3

不鼓励

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