Question

如何定位此图像以将css样式应用于它？

<img class="images BadgeImgOutline responsive-image" src="http://kudosoo.com/GBadges/badge8.jpg" style="width: 122px; height: 122px;">

我在CSS中尝试了几种选择器组合，但似乎无法正确定位它。（例如img.images #modal .img）

badgeselect div

中显示的图像

<div id="modal" class="login-form">
                    <div id="heading">

                    </div>          

                        <div id="badgeselect">
                        </div>

Answer 1

img.images.BadgeImgOutline.responsive-image{
/* styles */
}

虽然看起来好像

img.BadgeImgOutline{
/* styles */
}

就够了。

I would also suggest you read up on CSS selectors

您使用的选择器取决于所需的特异性水平，即如果您只想选择该图像，您可以参考哪些只能识别它，而不是其他任何东西（为了提高效率） - 这样做的主要方式是是为它分配一个id属性，然后将其用作选择器。

Answer 2

除非您在模态对话框中使用完全相同的CSS类，否则

#modal img.images.BadImgOutline.response-image { .... }应该可以解决问题。

Answer 3

首先，您需要关闭<img>这样的<img />代码，这样就像这样

<img class="images BadgeImgOutline responsive-image" src="http://kudosoo.com/GBadges/badge8.jpg" style="width: 122px; height: 122px;" />

然后您可以使用 CSS 来定位它：

img.images.BadgeImgOutline.responsive-image{
    /* Some CSS code */
}

或

#modal img{
    /* Some CSS code */
}

或两者一起

#modal img.images.BadgeImgOutline.responsive-image{
    /* Some CSS code */
}

希望这会对你有帮助..

如何使用CSS在模态框中定位div

3 个答案: