外部样式未应用于img标记

Question

外部样式不会仅应用于img标记。尽管它正在应用于同一文件中的其他标记。

主页.php

<link rel="stylesheet" href="styles.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js" ></script>
<div class="col-sm-3 thumbnail" style="height: 350px;">
    <img src="Images/1000px-Htc_new_logo.svg.png">
    <p class="test" >
        this is just  for testing the css link
    </p>
</div>

styles.css

img{
    height: 300px;
    width: 100%;
    border: solid 1px;
}
p{
    border: solid 1px;
}

p标签工作得非常好

Answer 1

在自定义css文件之前添加供应商css（引导程序等），以便在需要时覆盖默认的供应商样式。

Answer 2

您可以尝试的几个选项，

1） 更改另一个图像以进行尝试。但不使用这个1000px-Htc_new_logo.svg.png

2） 由于您加载了多个css文件，因此可以使用Firebug查看是否存在要覆盖的css规则。

3） 您可以使用css并将"！important"添加到style.css中进行测试，以查看外部样式是否可以应用于img标记。请注意！重要不是一个好的做法，只是使用它进行调试。

img{
height: 300px !important;  /* just use important for debug  */
width: 100% !important; /* just use important for debug  */
border: solid 1px !important;  /* just use important for debug  */

}

Answer 3

尽量避免使用！重要的是，这不是最佳做法。它将覆盖所有地方的代码。更具体地说，我的意思是向这些图像添加一个类，然后更改类属性。如

img .imageStyling {
    height: 300px;
    width: 100%;
    border: solid 1px;
}