同一元素应用多个class的优先级的测试！

使用多个class，以空格分开，如：<span class="a2 a1">
效果：

 代码如下 复制代码
.a1 {
font-size: 9pt;
color: #FF0000;
}
.a2 {
font-size: 18pt;
color: #0000FF;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
.a2 {
font-size: 18pt;
color: #0000FF;
}
a1
a2
a2 a1
a1 a2
　　

[ 可先修改部分代码 再运行查看效果 ]
调换一下a1和a2的顺序 Source Code to Run []

 代码如下 复制代码
.a2 {
font-size: 18pt;
color: #0000FF;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
.a2 {
font-size: 18pt;
color: #0000FF;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
a1
a2
a2 a1
a1 a2
　　

[ 可先修改部分代码 再运行查看效果 ]
加上!important看看效果 Source Code to Run []

 代码如下 复制代码
.a2 {
font-size: 18pt;
color: #0000FF!important;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
.a2 {
font-size: 18pt;
color: #0000FF!important;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
a1
a2
a2 a1
a1 a2

　　 [ 可先修改部分代码 再运行查看效果 ]
结论：若同时应用多个class，后定义的优先（即近者优先），加上!important最优先！

时间： 2024-04-27 02:15:54

同一元素应用多个class的优先级的测试！的相关文章

CSS&amp;nbsp;sel&amp;#101;ctor：&amp;nbsp;class&amp;nbsp;与&amp;nbsp;ID&amp;

CSS selector:class 和 id 都可以使"单一选择符"有不同的样式A1:二者主要的区别在哪里呢? id你只能用来定义单一元素,定义二个以后.页面不会出现什么问题,但是W3检测的时候认为你页面不符合标准:class是类,同一个class可以定义多个元素.就页面效果而言,两个东西的视觉效果几乎无差别.A2:id 选择符为什么要少用,它有有什么局限性? 单一使用的样式用id,需要程序.js动态控制的样式用id,id在页面只能使用一次!提供少用id,因为id可能和页面嵌的程序冲

定制并发类（十）实现一个基于优先级的传输队列

声明:本文是< Java 7 Concurrency Cookbook>的第七章, 作者: Javier Fernández González 译者:郑玉婷 实现一个基于优先级的传输队列 Java 7 API 提供几种与并发应用相关的数据类型.从这里面,我们想来重点介绍以下2种数据类型: LinkedTransferQueue:这个数据类型支持那些有生产者和消费者结构的程序. 在那些应用,你有一个或者多个数据生产者,一个或多个数据消费者和一个被生产者和消费者共享的数据类型.生产者把数据放入数据

css优先级

原文:css优先级 为什么要写这篇文章是因为 <!DOCTYPE html> <html> <style type="text/css"> body h1 { color: green; } html h1 { color: purple; } </style> </head> <body> <h1>Here is a title!</h1> </body> </html&

css优先级计算规则

原文:css优先级计算规则     最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了--,ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级.做为一个合格的前端工程师,让我们彻底搞清楚css优先级计算规则吧!     特殊性     css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向

【原】display:inline-block下的IE元素

通常我们想让内联元素为行块布局显示,有2种方法,最常见的是方法是.selector {float:left;......},第二种方法是.selector {display:inline-block;......},对于第二种方法,在IE浏览器中得到支持,测试结果会认为IE能识别display:inline-block属性,而最近查阅了资料后,得到结果并非如此...... display:inline-block ,简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递.这个属性目在主要

自动化测试学习（五） selenium命令之定位页面元素

定位页面元素 对于很多selenium命令,target域是必须的.Target在web页面范围内识别UI元素,它使用locatorType=location的格式.在很多情况下,locatorType可以省略,下面举例方式来描述各种类型的locatorType. 假如,有如下一段HTML代码: html> <body> <form id= "loginForm" > <input name= "username" type= &

JS魔法堂：元素克隆、剪切技术研究

一.前言   当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素.而在部分浏览器中,通过复制来获取新元素的效率比通过 document.createElement 方式的要高一些,具体的性能比较如下: 2% in IE8, but no change in IE6 and IE7 Up to 5.5% in Firefox 3.5 and Safari 4 6% in Opera (but no sav

菜鸟学自动化测试（五）-----selenium命令之定位页面元素

定位页面元素 对于很多selenium命令,target域是必须的.Target在web页面范围内识别UI元素,它使用locatorType=location的格式.在很多情况下,locatorType可以省略,下面举例方式来描述各种类型的locatorType. 假如,有如下一段HTML代码: html> <body> <form id= "loginForm" > <input name= "username" type= &

js中查找最近的共有祖先元素的实现代码_javascript技巧

先来看概念,首先DOM是一棵树,其根节点是Document,大致可以用下图来表示: 所谓"最近的共有祖先元素",是指给定一系列元素,找出在树中深度最大的,但同时为所有这些元素的祖先元素的元素. 比如上图中,I和G的结果为C,G和H的结果为A,D和E的结果为html,C和B的结果为html等. 测试驱动 对于偏逻辑的题,并没有十足的把握函数是正确的,因此还是先构造测试的用命,力求让函数通过测试. 本次就以上图的结构作为DOM结构,A表示body,B表示head,其他节点均使用div元素,