css中关于两个class一起使用的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中关于两个class一起使用的问题相关的知识，希望对你有一定的参考价值。
<style type="text/css">
.two width:1002px; margin:0 auto; color:red;
.onecolor:blue;
</style>
<body>
<p class="one two">同时使用两种class，同时使用</p>
</body>
问题：
为什么显示的不是红色，two是最后调用的，不是应该用红色覆盖one的蓝色吗？
参考：http://www.cnblogs.com/zhangpengshou/archive/2012/08/08/2628737.html 参考技术A 因为你的style中
.one写在了.two后面。
你的class中写了one和two，也就是同时定义了两种样式，浏览器解析顺序是这样的，先读取one和two，然后再style中寻找two的样式，找到了two先执行了红色（因为你的two写在前面），然后又找到了one然后就执行one覆盖了two了。这是你浏览器的解释顺序，但是需要注意的是，并不是所有的浏览器都是这样解析的，如果你自己写一个浏览器改变了解析顺序，则可能不会是这样的结果，我们写css最好不要写这种容易让浏览器误解的代码，如果不是必须这么写，尽量不要，如果非要，最好用js给解析前提前做一个判断然后指定成唯一的样式代码。避免误解。 参考技术B 取决于在这个个优先级
<style type="text/css">
.two width:1002px; margin:0 auto; color:red;
.onecolor:blue;
</style>
.one在.two后面啊，
至于<p class="one two">这个里面的class先后顺序是无所谓的 参考技术C .one .two 的css部分 上下写反了追问
有什么区别
追答就近原则 .one 离它进一些自然就会是one的颜色
参考技术D 呵呵，你试试看变换style定义中.two和.one的顺序看看就明白咯H5中关于animation的属性介绍
参考技术Acss3中的动画属性如果能够好好的使用，可以写出很多优美的动画
有两个值，默认为normal。意为一个动画结束之后，下一个动画周期从头开始接着动画播放。
另外一个值为alternate，意为动画结束之后，下一个动画周期从尾到头播放，再从头到尾播放。
paused 暂停
running 运行
html如下：
CSS如下：
使用图片来表示 translateY 的值与 时间 的关系:
横轴为表示 时间 ，为 0 时表示动画开始的时间，也就是向 box 加上 on 类名的时间，横轴一格表示 0.5s
纵轴表示translateY的值，为 0 时表示 translateY的值为 0，纵轴一格表示 50px
html如下：
css如下：
以上是关于css中关于两个class一起使用的问题的主要内容，如果未能解决你的问题，请参考以下文章
js中关于给两层的li标签添加class的问题，求大神解答！