css - CSS - 如何影响除一个特定图像之外的所有图像

Question

我如何设置条件以影响我网页中的所有图像（通过 CSS），除了我已经专门设置条件的一张特定图像？

例如：

#rightMain img{
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

这会影响#rightMainID 中的任何图像。

然而，

img{
    height: 100%;
}

这也会影响#rightMainID 中的图像，因为它会扭曲图像的整体分辨率，使其看起来不自然。

我想知道如何影响除 in 之外的所有图像，#rightMain因为我已对该图像应用了特定格式并且不希望更改它；它必须存在于一种状态中，并且仅存在于一种状态中，在#rightMaindiv 中。

我知道声明一个 div 类/ID 来影响子/父/兄弟元素等，但我似乎无法弄清楚这一点。

我的主要目标是保持图像#rightMain与声明的完全一致，但也能够影响页面/站点的其余部分中的所有图像（不包括上述图像）。

任何帮助将不胜感激。

非常感谢。

score 1 · Accepted Answer

您正在使用两个选择器设置 height: 100% - 我看不出导致您出现问题的差异在哪里？

在你澄清你的问题之前，我唯一想到的是：

#rightMain img {
    width: 100%;
    height: auto; /*override height: 100%; */
    border: 1px solid #000;
}


img{
    height: 100%;
}

score 1 · Accepted Answer

优先级转到更具体的 CSS 规则，如果是相同的 CSS 规则，优先级转到最后一个解析的规则。

在你的情况下

#rightMain img{
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

比更具体

img{
    height: 100%;
}

因此#rightMain img { ... } 可以重写指定到 img { ... } 规则中的属性。

您也可以使用 :not() CSS3 选择器，但有风险，因为并非所有浏览器都支持，您可以在此处阅读更多信息：http: //kilianvalkhof.com/2008/css-xhtml/the-css3-not-选择器/

score 0 · Accepted Answer

html:

<img id="myid" src="somepic.png" />

CSS：

img#myid {
   /*apply some props to it*/
}

确保在声明适用于所有图像的任何代码之后放置此 img#myid 选择器。

3 回答 3