Question

我想为特殊DIV中的图像设置不同的IMG样式。这是我的结构

<div class=content>
   <div class=contact>
   </div>
</div>

然后我有像这样的内容div的IMG样式

div.content img {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px;
    padding:5px;
    margin-right:15px;
    margin-top:8px;
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
}

我想要实现的是为Contact DIV设置不同的IMG样式但它不起作用。

div.contact img
{

}

任何想法我做错了什么？

谢谢！

Answer 1

为你创造了一个小提琴。这就是你要找的http://jsfiddle.net/4DpBV/1/。您可以使用>属性

.content {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px;
    padding:5px;
    margin-right:15px;
    margin-top:8px;
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    border:2px solid;
    height:50px;
}

.content > .contact {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px;
    padding:5px;
    margin-right:15px;
    margin-top:8px;
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    border:2px solid red;
    height:10px;
}

Answer 2

层叠样式表意味着前css级联到其所有孩子。

div.content img表示“对于包含类内容的div中的任何地方的任何img-tag”。

如果你不想在后者上添加一个说明符，你需要在前者img-tag中添加一个说明符，或者主动覆盖/重置后者的每个属性。

Answer 3

您可以使用直接子操作符>

所以将你的css改为：

div.content >  img {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px;
    padding:5px;
    margin-right:15px;
    margin-top:8px;
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
} /* Will only apply for images inside content div and not contact div */

div.contact > img {
  /* This styles will only be applied to images in contact div */
}

div.content img表示div.contact

内的所有图片

删除DIV中图像的css IMG样式

3 个答案: