Question

我将以下CSS应用于影响背景颜色变化的帖子文章 -

 .post-article{   
     background: green;
     -webkit-animation: mymove 15s; 
 }
 @-webkit-keyframes mymove {
     from {background-color: green;}
     to {background-color: blue;}
 }

现在，这篇文章帖子包含am图像，CSS也影响了图像！我想有选择地排除这个图像类（.article img）因为这个CSS而受到影响。所以，我用 -

.post-article:not(.article img){   
     background: green;
     -webkit-animation: mymove 15s; 
 }
 @-webkit-keyframes mymove {
     from {background-color: green;}
     to {background-color: blue;}
 }

但是没有发生所期望的变化，所有因素继续受到影响。任何指导方针？

缩小HTML格式;

<html>
<head>
<style> 
.post-article {  width: 300px;
height: 200px;  
background: green;
-webkit-animation: mymove 15s; 
}
@-webkit-keyframes mymove {
from {background-color: green;}
to {background-color: blue;}
}


</style>
</head>
<body>

<div id="post-article"></div>

</body>
</html>

Answer 1

在中间添加另一个div，我认为它应该有效：

<div>
    <img src="//placehold.it/400x200" />
    <div class="post-article">
        <p >lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum</p>
    </div>
</div>

从动画属性的CSS中排除图像

1 个答案: