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

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

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

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

u013538542
u013538542   2016.03.30 15:12

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
外联式css样式
外联式css样式03              引入css样式表有两种方式:(面试)         1.link标签引入  推荐使用         2.@import引入     -->              link标签引入,该标签写在head标签里(与文档配置有关,不需显示)     -->                    @import引入,需要写在st
引入css外联样式表不起作用
在原来的.css文件中加入了几个新的class,然后打开页面,加入的样式没有显示出来。 后来在页面发现,浏览器确实加载了这个.css文件,但是新加入的几个class根本没有加入。如图: 苦恼了一段时间,发现向.css文件加入class时,是直接向.css文件添加的。 原来,要通过open with css Editor 编辑
CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: 这里文字是红色。 2:嵌入式,嵌入式css样式,就是可以把css样式代码写在XXX标签之间。 span{ color:red; } 3:外部式css样式,写在单独的一个文件中.
内建与外联css与js的优劣
CSS 全称级联样式表 (CascadingStyle Sheets),在实际应用中,一般有以下三种级联方式。 1.外联式 外联式样式表中,CSS代码作为文件单独存放,如以 style.css 文件包含所有样式。在HTML中的外部级联采用 标记或者 @import 语句来引入。示例代码如下: //link 链接 @importurl("style.css"); //@import 导入
CSS的组成,三种样式(内联式,嵌入式,外部式),优先级
--------------------------------------------------------------------------------------------------------------------------------------内联式CSS ---来自慕课----------------------------------------------------
引用外部CSS和JS的方法
引用外部CSS和JS的方法
HTML系列之外联式(六)
<html lang="en"> <head> <meta charset="UTF-8"> <title>演示如何导入CSS文件</title> <!--通过href标签,也可以将CSS文件导入到html文档中--> <!--rel:表示被连接的文件是用来作什么的--> <!--stylesheet表示被连接的文件是一个样式表,也就是装的都是样式-->
js获取内嵌或者外联样式函数封装
基础知识js访问css属性的两种方式:box.style.left    与 box.style[&quot;left&quot;]  box.style.left 只能获取行内样式,且不能传递参数,但是后者可以传递参数获取内嵌或者外联样式函数封装function getClass(obj,attr) { if(obj.curentStyle){ return obj.currentStyle...
css样式内联式,外联式,嵌入式的格式是什么?
外联式样式(属于外部样式表) 特征: 1、有一个单独的CSS文件存在![如:001.css] 2、首先,通过【格式】→【样式表连接】与CSS文件[001.css]建立连接! 3、在合适的地方使用 class="样式名" 调用具体的样式效果! 如: 嵌入式样式(属于内部样式表) 特征: 1、样式的属性内容以代码的形式[放在 ]写在网页代码中! 2、首先,通过【格式】→【样式】设置样
CSS:外部样式表/内部样式表/内联样式
在html中,引用CSS样式有3中方式:外部样式表,内部样式表,内联样式。 本文代码整理自w3school:http://www.w3school.com.cn