问题描述

外联式CSS部分样式无法引用

我在JSP页面上设置了两个按钮：

 <input type="submit" value="登 录" style="width:100px;" class="button_blue"/>
 <input type="button" value="注 册" style="width:100px;" class="button_green" onclick="javascript:location.href='register.jsp'"/>

采用了外联式的css，css文件中的配置如下：

 .button_blue
{
    display:inline-block;
    float:left;
    height:41px;border-radius:4px;
    background:#2795dc;border:none;cursor:pointer;
    border-bottom:3px solid #0078b3;*border-bottom:none;
    color:#fff;
    font-size:16px;padding:0 10px;*width:140px;
    text-align:center;outline:none;font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif;
}
input.button_blue:hover
{
    background:#0081c1;
    border-bottom:3px solid #006698;*border-bottom:none;
    color:#fff;
    text-decoration:none;
}
.button_green
{
    display:inline-block;
    float:left;
    height:41px;border-radius:4px;
    background:#aef055;border:none;cursor:pointer;
    border-bottom:3px solid #46a60d;*border-bottom:none;
    color:#fff;
    font-size:16px;padding:0 10px;*width:140px;
    text-align:center;outline:none;font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif;
}
input.button_green:hover
{
    background:#46a60d;
    border-bottom:3px solid #40741d;*border-bottom:none;
    color:#fff;
    text-decoration:none;
}

但是运行效果却是这样

登录按钮有效果，但注册按钮没有应用到css中的样式，但当我将注册按钮的样式直接定义在head部分的标签中时，效果是可以显示的，请问为什么会出现这种情况？</p>

解决方案

根据你的描述分析 应该是这个页面引用了 多个css文件 而其他css文件也有 .button_green 顶掉了你写的这段代码。
当你把这个样式 放到页面的 head 部分中后 这段css 优先级变高 所以又好用了。
你可以用 谷歌浏览器调试一下 看看是那个css文件顶掉的你的样式 再尝试用 关键字 !important 强制把某些css 样式优先级调成最高

解决方案二：

我想问一下，将submit换成button之后，效果会怎么样呢？

解决方案三：

用f12调试工具一看就看出问题了

解决方案四：

因为你的css样式没有被加载出来，你可以去firefox的firebug看一下，肯定报错了