2 lihfxy lihfxy 于 2016.03.30 12:49 提问

外联式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>

4个回答

qq978450288
qq978450288   2016.03.30 12:55
已采纳

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

lihfxy
lihfxy 回复qq978450288: 找到原因了,不清楚为什么,虽然我在eclipse中在css文件中添加了样式并保存了,可是重新打开css文件后发现所有添加的样式都消失了,因此我直接用记事本打开css文件编辑再保存,现在样式就能显示了。
一年多之前 回复
lihfxy
lihfxy 回复qq978450288: 我看了一下,查看元素时,登录按钮是能取到样式的,但是注册按钮根本就取不到我设置的样式,但好像也没有被顶掉,我下面重新添加了button_red和button_white,white可用,但是red不可用,不知道是什么原因,格式都是一样的
一年多之前 回复
qq978450288
qq978450288 纠正 不一定是其他css文件也有.button_green 而可能只有.button_green内部的某修信息。 具体是那个属性优先级比你这段代码高 要调试一下才明了
一年多之前 回复
u012377333
u012377333   Rxr 2016.03.30 13:12

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

lihfxy
lihfxy 是一样的效果
一年多之前 回复
u013437843
u013437843   2016.03.30 13:20

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

u013538542
u013538542   2016.03.30 15:12

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!