外部样式未应用于img标记

时间:2016-07-20 03:56:53

标签: javascript jquery html css twitter-bootstrap

外部样式仅适用于img标记。虽然它被应用于同一文件中的其他标签。

Home.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标记工作正常

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您可以尝试多种选择,

1)更改另一张图片进行试用。但不要使用这个1000px-Htc_new_logo.svg.png

2)因为你加载了几个css文件,你可以使用Firebug来查看是否有一些css规则被覆盖。

3)你可以使用带有“!important”的css添加到你的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  */

}

答案 2 :(得分:0)

尽量避免使用!重要的是,这不是最佳做法。它将覆盖任何地方的代码。相反,更具体一点,这就是我的意思,即为这些图像添加一个类,然后更改类属性。如

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