html - CSS代码不能同时工作

Question

我有这个 css 代码，它使图片不透明，请参见下面的代码:

CSS1:

.hover:hover { opacity:0.8;}

HTML1:

<a href="http://www.byggprojektoren.se"> 
<img class="hover" src="http://byggprojektoren.se/wp-content/uploads/2014/09/HomepagePic.jpg"/> 
</a>

但是上面的 CSS 与下面的代码冲突了:

CSS2:

.medarbetare-img {
width: 180px;
height: 100px;
margin-bottom: 5px;
margin-top: 16px; 

HTML2:

<div class="medarbetare-img" style="background:url(http://byggprojektoren.se/wp-content/uploads/2014/09/R2.jpg) center top no-repeat;">
                    </div>

当我删除 CSS2 时，CSS1 工作正常。但是当两者都存在时，CSS1 会以某种方式被覆盖。有没有人知道如何重写这两个 CSS 以使它们都起作用？

Answer 1

可能 CCS2 覆盖了 CSS1，因为您在 HTML 代码中将其添加到 CSS1 之后。如果你想避免覆盖，将它们合并到一个 CSS 文件中，并确保你的选择器是唯一的，相反，你将再次覆盖