Question

您将在此代码中看到我们有一个随机代码树和子图像树。即使您使用自定义类，子图像也始终遵循图像的父级max-width属性。无论如何，对于所使用的课程，有没有这样做？

注意这是在vbulletin上使用如此多的CSS覆盖它是荒谬的。新的CSS位于vbulletin自定义css文件“additional.css”

中

另外请注意，悬停效果约束为120px，但正常类不会超出。

CODE

<div class="content">
    <p>
        <div>
            <div class="something">
               <img src="http://shadowness.com/file/item9/314049/image.jpg" class="thumbbbimg" />
            </div>
         </div>
    </p>
</div>

CSS

.content img {
    max-width: 100%;
}

.thumbbbimg {
    max-width: 120px;
}

实际CSS

/* Thumb BBCode CSS */
    .content img.thumbbbimg {
        width: 120px;
        max-width: 120px;
        max-height: 120px;
        opacity: 75;
        margin: 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.4);
        border: 1px solid #8C8C8C;
        filter: url(filters.svg#grayscale);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(100%); 
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(1); 
        overflow: hidden;
    }

    .content img.thumbbbimg:hover {
        width: 120px;
        max-width: 120px;
        max-height: 120px;
        opacity: 100;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
        -moz-box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
        box-shadow: 0 0 5px 5px rgba(255,255,255,0.3);
        filter: none;
        -webkit-filter: grayscale(0%); 
        filter: gray;
        -webkit-filter: grayscale(0); 
  }

Answer 1

您可以通过将.thumbbbimg替换为img.thumbbbimg来实现此目的：

JSFiddle - DEMO

.content img {
    max-width: 100%;
}
img.thumbbbimg {
    max-width: 120px;
}

<div class="content">
    <p>
        <div>
            <div class="something">
                <img src="http://shadowness.com/file/item9/314049/image.jpg" class="thumbbbimg" />
            </div>
        </div>
    </p>
</div>

Answer 2

.content img :not(.thumbbimg) {
        max-width: 100%;
    }
    .thumbbbimg {
        max-width: 120px; 
    }

小提琴：

http://jsfiddle.net/41tyamsz/2/

使用:not会将规则应用于除指定元素之外的元素。

Answer 3

不要养成这个习惯，但是你可以用一个重要的方式覆盖，如此

.thumbbbimg {
    max-width: 120px !important;

}

用新属性覆盖max-width

3 个答案: