关于css样式加载的问题
今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑。
我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果。(主要训练jQuery选择器和addClass)
但是在我真正操作后发现我的奇数行都变色了,而偶数行都没有变。具体效果如下:
原效果:
我们可以看到首行为一种颜色,奇数行无颜色,偶数行设置了背景颜色
鼠标悬浮在第一行的效果:
这里可以观察到“梅西”一行变换了颜色
鼠标悬浮在第二行的效果:
到了这里就发生了异常,整个表格居然没有发生变化
接下来我将放上我的源代码,大家可以先观察一下是哪里出现了错误。
jQuery相关源码:
<script type="text/javascript">
$(function(){
//全选全不选
$("#thch").click(function(){
var ch = $("#thch").prop("checked");
$("#tabl td input").prop("checked",ch);
}) //表格隔行换色
$("table tr:gt(0):odd").addClass("even") //鼠标悬浮变色
$("table tr:gt(0)").mouseover(function(){
$(this).addClass("mv")
})
$("table tr:gt(0)").mouseleave(function(){
$(this).removeClass("mv")
}) $("table tr:gt(0)").click(function(){
var self = $(this)
var a = $("this input").prop("checked")
})
})
</script>
css相关代码:
#tabl{
width: 600px;
height: 200px;
margin-top: 200px;
text-align: center; } .tr1{
background-color: cornflowerblue;
color: white;
} .mv{
background-color: rosybrown;
} .even{
background-color: antiquewhite;
}
由于我表格给奇数行先添加了一个even的css样式,在处罚鼠标悬浮事件后的添加的mv的css样式并没有生效,所以当时我首先想到的是addClass这个方法是否在添加过一次css样式后,再次添加时只在第一次添加的样式后边寻找,由于我的.even是写在.mv后的,所以没有找到。
为了测试我的上述所想,我便进行了测试,在.mv中添加一个font-size的属性,测试是否生效,测试结果如下:
可以清楚的看到字体变大了,然而颜色依旧没有变。
这就让我感到了更加困惑,问了一些同学也没有得到我想要的答案,由于天色已晚,我也没有什么思路,就暂时放下了这道题。第二天一早我在吃饭时突然想到是否与css的加载顺序有关,便匆忙的赶去验证我的想法。
我将.mv与.even互换了位置,效果如下:
这次终于对了!!!
在改对之后我便仔细去查了一下addClass的原理,它并不是将标签上本来就有的css样式覆盖,而是添加css,所以它也遵循css样式的加载顺序,一开始时.mv在.even的前边,所以要加载后边的样式,然而后边的样式还是.even,所以没有变换,将他们两个互换顺序后就可以看到变换了。
总结:
在使用addClass方法时,并不是将原有的css样式覆盖,而是将标签添加上css样式,添加后的加载与css文件中的顺序有关,也就是后写的覆盖前边的。
关于css样式加载的问题的更多相关文章
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- css样式加载顺序
css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...
- css 样式加载次序
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权(本人理解为:先加载1的样式,然后用2的样式覆盖1中的样式,3.4同理) 浏览器缺省设置(浏览器默认的样式 ...
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- css文件加载:@import和link的区别
刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...
- CSS远程加载字体
CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...
- webpack教程(四)——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
- 样式加载不出来,浏览器控制台报错:Resource interpreted as Stylesheet but transferred with MIME type text/html
写登录的时候出现的问题,样式时好时坏,浏览器控制台看到的信息是: Uncaught SyntaxError: Unexpected token <Resource interpreted as ...
- webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
随机推荐
- SQLServer 可更新订阅数据冲突的一个原因
原文:SQLServer 可更新订阅数据冲突的一个原因 可更新订阅为什么有冲突? 可更新订阅中,当升级增加一个字段时,通常在发布服务器的发布数据库中增加,对表增加字段后,发布自动同步到订阅数据库中(复 ...
- SqlServer删除复制监视器中无效的发布名称
原文:SqlServer删除复制监视器中无效的发布名称 在服务器复制监视器中有一个发布名称,因为该发布订阅已经删除. ReportServerTempDB只有一个发布,已无效,打算删除. --直接删除 ...
- C#判断系统是32位还是64位
bool type; type = Environment.Is64BitOperatingSystem; Console.WriteLine(type);
- webform的图片防盗链
最近用到域的问题,不是同一主机的请求将不允许请求此页面. 这其实和图片防盗链的本质是一样的. 通过两个属性:由于当时用的aspx视图引擎,所以需要通过HttpContext.Current才能拿到ht ...
- 声谱预测网络(Tacotron2)
整个特征预测网络是一个带有注意力机制(attention)的seq2seq网络. 编码器-解码器(Encoder-Decoder)结构 在原始的编码器-解码器结构中,编码器(encoder)输入一个序 ...
- MySQL创建数据库并插入数据
启动MySql 启动服务:sudo service mysql start 登陆:mysql -u root 新建数据库 CREATE DATABASE <数据库名>; 在大多数SQL系统 ...
- VPS用来配置上网外,还可以做一个同步盘
我曾经在一个活动的博文里说过,男人必须要有一个VPS和一个树莓派,VPS这个东西,以后会是中国男人的一种必备技能,今天又有一个小伙伴请教我VPS的用法,我就简单说说我目前使用的情况.首先我希望你能有点 ...
- 浅析C#代理
delegate 是委托声明的基础,是.net 的委托的声明的关键字action 是基于delegate实现的代理 有多个参数(无限制个数)无返回值的代理 func 是基于delegate实现的代理 ...
- Hystrix断路器配置属性解析
HystrixCommand 配置方式 我们的配置都是基于 HystrixCommand 的,我们通过在方法上添加 @HystrixCommand 注解并配置注解的参数来实现配置,但有的时候一个类里面 ...
- Python之二叉树Binarytree
二叉树是树的简化版,除根节点之外的所有节点都有一个父节点,任意节点都可以最多有一个左子节点和右子节点. 二叉树的遍历是非常重要的算法,主要分为深度优先遍历和广度优先遍历. 其中深度优先遍历按照访问根节 ...