动画中的id与class使用css3的优先级问题
今天在做一个项目，用zepto给元素增加一个class，class里面有transform的效果。开始的时候，元素的样式是用id选择器写的，但是增加class之后，发现动画效果出不来，当时头好晕没想出来为啥，结果回家后用简单的代码打一遍，发现原来是个很简单的问题……
动画出不来的原因就是：id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式，导致了动画出不来。
简单代码测试：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all 1s; }
.div2 {
width: 100px;
height: 100px;
background: blue;
-webkit-transition: all 1s; }
.animation{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="div2"></div>
<script>
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementsByClassName("div2")[0];
oDiv1.onclick=function(){
this.className="animation";
}
oDiv2.onclick=function(){
this.className="div2 animation";
}
</script>
</body>
</html>
动画中的id与class使用css3的优先级问题的更多相关文章
- 冒泡动画按钮的简单实现（使用CSS3）
冒泡动画按钮的简单实现(使用CSS3) 原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ,基本原理是利用了 ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- 删除数据表中除id外其他字段相同的冗余信息
删除一个信息表中除id外其他字段都相同的冗余信息,如下 id name addr 1 a b 2 a b 3 b c 删除这个表中的冗余信息 即应该是 id name addr 1 a b 3 b c ...
- jQuery判断网页中的id是否有重复的
From:http://blog.csdn.net/china_skag/article/details/6915323判断网页中的ID是否有重复的:指定ID判断 $(function(){ $(&q ...
- iOS开发之动画中的时间
概述 在动画中,我们会指定动画的持续时间.例如 scaleAnimation.duration = self.config.appearDuration 那么这个时间是怎么定义的呢?是指的绝对时间吗? ...
- zencart分类页产品页去掉url中的id号
最近公司新上的网站被seo指出要修改url,去掉url中产品id.由于我们用的是zencart框架,装了 Ultimate SEO URLs 插件,所以在网上应该有这方面的资料,本文主要参考资料: 原 ...
- jquery中的$("#id")与document.getElementById("id")的区别
以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...
- iOS动画中的枚举UIViewAnimationOptions
若本帖转出“博客园”请注明出处(博客园·小八究):http://www.cnblogs.com/xiaobajiu/p/4084747.html 笔记 首先这个枚举属于UIViewAnimation. ...
- MySQL 中 where id in (1,2,3,4,...) 的效率问题讨论
MySQL ACMAIN_CHM06-26 16:36 等级 84次回复 [求证&散分]MySQL 中 where id in (1,2,3,4,...) 的效率问题讨论 庆祝本月大版得 ...
随机推荐
- 20155216 2016-2017-2 《Java程序设计》第三周学习总结
教材学习内容总结 区分基本类型与类类型 类类型是自己定义产生的,基本类型是long,int,double等类型. 在类的定义过程中,可直接用class XXX {}对每个序定义的值域成员进行定义.这样 ...
- 20155229 2016-2017-2 《Java程序设计》第十周学习总结
20155229 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 网络 网络分为局域网.广域网.城域网 一次HTTP请求包含3个部分:①方法--统一资源标识符 ...
- 20155325 2016-2017-2 《Java程序设计》第十周学习总结
教材学习内容总结 Java视频笔记 强制转换 运算符 获取特定位数的值 循环 switch(不能判断布尔型) int x = 3, y = 3, z = 3; int n = 0; switch (x ...
- 20155336 2016-2017-2《JAVA程序设计》第一周学习总结
# 20155336 2016-2017-2<JAVA程序设计>第1周学习总结 ## 教材学习内容总结 开学的第一周,带着些许的欣喜和好奇,听完了老师的第一堂课.说心里话学习JAVA仿佛 ...
- JDK核心源码
一.核心包有哪些? Jdk的包中,除开了lang包下面的类,用得最多的应该要属于util包下面的类了, 本篇文章主要针对Jdk的util包下面的类(util目录下面的类,暂时不包括util 包下面的子 ...
- day6 角点检测
1.Harris角点检测 # coding=utf-8 import cv2 import numpy as np filename = 'pic5.png' #1.读入一个灰度图像 img = cv ...
- Arduino 101/Genuino101使用-第一篇
1. 函数API说明文档在哪里? 2. 如果我想定义一个引脚做GPIO,不是库里有的. 3. digitalWrite(13, lighting); 这个函数里面 13代表的是啥? 4. setup( ...
- mysql 错误代码 1248
1248 - Every derived table must have its own alias (MYSQL错误) 这句话的意思是说每个派生出来的表都必须有一个自己的别名,给派生表加上一个别名就 ...
- Linux中新增硬盘的分区，格式化与挂载
Linux中新增硬盘的分区,格式化与挂载 本篇教程内容为怎样对Linux新增硬盘进行挂载,所以如果有准备新增硬盘但是有各种问题的,请参看本篇教程. 我们先说说什么是挂载? 我们知道Linux中的所有设 ...
- webpack Error: Cannot find module 'webpack/lib/Chunk' Extract-text-webpack-plugin 分离CSS
深入浅出webpack 1.5章节使用Extract-text-webpack-plugin分离css 安装插件后打包提示错误 Error: Cannot find module 'webpack/l ...