未应用 CSS img[src="..."]答案

【问题标题】：CSS img[src="..."] not being applied未应用 CSS img[src="..."]
【发布时间】：2016-05-17 05:34:57
【问题描述】：

this page，我有图片

这是@http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png

上面的页面有this stylesheet，其中包含：

img[src='http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png'] {
    width: 103px;
    height: 192px;  
}

但是，图像没有设置为width: 103px 或height: 192px，实际上根本没有应用CSS 规则。

我不知道为什么 - 你能吗？谢谢。

更新：我添加了一个类，因此图像标签现在是：

<img class="alignright MHlogo" alt="MH Logo" src="http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png" width="103" height="192">

和 CSS：

.MHlogo {
    width: 103px;
    height: 192px;      
}

但是.MHLogo 没有被应用？

Update2：我注释掉了

img {
    width:auto;
    max-width: auto !important;
    height: auto !important;
    box-shadow: #000 0em 0em 0em !important;
}

现在正在应用.MHLogo。

【问题讨论】：

创建一个 JS Fiddle，这将有助于我们识别问题。
你试过去掉media参数吗？
你不能用#sitelogo{width: 103px;高度：192px； } ...?
你为什么选择了这么长的风格？将类应用到您的图像并在 css 中设置样式？

标签： css

【解决方案1】：

如果你坚持用href制作，你需要转义它。比如：

img[src="http\:\/\/www\.orsgroup\.com\.au\/wp-content\/uploads\/2012\/11\/MH-Logo\.png"] {
    width: 103px;
    height: 192px;  
}

<img class="alignright" alt="MH Logo" 
  src="http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png"
  width="103" height="192">

我生成这个字符串的方法是在 Chrome 中打开控制台，然后运行：

CSS.escape("http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png");

More about CSS.escape()

我同意这里的每个人都说 CSS 类是一种更好的方法。我只是想确保我确实回答了具体问题。

【讨论】：

您好 Melingy，感谢您解决这个问题。我已经为我的问题添加了更新（我尝试过使用一个类，但它不起作用）。
我添加了第二次更新，问题已解决。谢谢。
你能解释一下为什么需要转义属性值吗？
因为特殊字符在 CSS 中具有特殊含义，并且解析不够好，无法检测到属性值中的字符串边界。您可以查看CSS Standard，但在此 SO 答案stackoverflow.com/a/13988017/146656 中也有很好的解释，我发现它可以回复评论。

【解决方案2】：

您可以在样式表中添加宽度和高度

.alignright {
    width: 103px;
    height: 192px;
}

【讨论】：

【解决方案3】：

width:auto,height:auto 属性覆盖了样式表中所需的高度和宽度

【讨论】：

【解决方案4】：

试试这个

<img class="alignright" alt="MH Logo" src="http://www.orsgroup.com.au/wp-content/uploads/2012/11/MH-Logo.png" style="
height: 103px !important;
width: 129px !important;">

如果可行，您可以将高度和宽度移动到 css 类。

【讨论】：

内联样式总是一个坏主意，!important 也是如此。出于调试目的，它可能很有用，但它不能保证将这些属性移动到类的 css 中会起作用。我会将您的最后一条语句更改为“如果它在那里工作而不是在 css 类上工作，那是因为某些东西在其他地方覆盖了这些属性。”