html - 在嵌套的 DIV 中停止图像边框

Question

我正在制作一个 Tumblr 主题，我必须发挥创意，让我的页面看起来也像我想要的那样。

我遇到的一个问题是我想要在单个页面上的任何图像上使用绿色边框和最大宽度 150，但是单个页面的模板用于索引页面上的文本帖子，所以我的索引页面图片被设置为具有边框和最大宽度 150 像素，这是不正确的。

幸运的是，tumblr 上有一个代码可以让我执行某些正在查看索引页面的人的代码。那么有什么办法可以制作第二个 div 来否定第一个 div 中的边框和大小规则？这是我的代码:

.text img{ //for individual pages
    max-width:150px;
    padding: 3px;
    margin: 0 5px 3px 0;
    border: 3px solid #52B472;
}

.notpage img{ //for index page
    max-width: 500px;
    border: none;
    margin: 0px;
            padding: 0px;
}

HTML:

<div class="text">
    <div class="notpage">
        In a perfect world, there would be no borders or max width on images in this div.
    </div>
</div>

可悲的是，“文本”div 中的 CSS 带入了“notpage”div。那么有人知道我可以用什么方法来否定嵌套 div 中第一个 div 的 CSS 吗？

Answer 1

尝试改变

.notpage img{ //for index page

到

.text .notpage img{ //for index page

如果还是不行，试试这个:

max-width: 500px !important;
border: none !important;

但这不是很好的做法。