css选择器与DOM'匹配的关系
一道面试题
css 选择器匹配时,只考察是否包含有对应的class,而与class的顺序无关
而css的定义是后面的覆盖前面的定义
原理:http://www.w3.org/html/ig/zh/wiki/CSS2/selector#class.E9.80.89.E6.8B.A9.E5.99.A8
DEMO:http://jsfiddle.net/VCk9U/
<div class="a" >text 1</div>
<div class="b" >text 2</div>
<div class="a b" >text 3</div>
<div class="b a" >text 4</div>
.a { color: red;}
.b { color: blue;}
.a.b { color: green;}
.b.a { color: yellow; }
输出结果:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYMAAAByCAIAAAA+vypNAAAEgElEQVR4nO3dwXGjMBiAUTqiFTdAQXRDI7m5BXeRRHtgjQUCLO9m5t+13hsfMoSxb98IgVD3+fn5DRCq+/r6+v7+TgBxlAiIp0RAPCUC4ikREE+JgHhKBMRTIiDeQYnGPnXD3373NKSuT9fn59WdBrytgxIN3Q+UaOyfJOY6pq5LXadE0Li4El3H3z/xNFjAuytK9BinzJ+sR0N2fJoPTanrUj8+zhn71HVpmtZfchoaJYLmVY+J8iPT8IjR/Pd4TelesfEelcrEKBE0r65EeXpSSuma+i4N0/bkoRwfKRHwXF2JdodIj+hMqevSUNwpUyKgTn2Jyk92wjw9NK5zokRAneoS5ZddW9P+zLQSAXXq54mOY/G7U9fUmycC/sTJM9Z5Ha6pL0ZJ+b2z8j5aKue5DygRNO9o3dmcnrw+y5HseaL5tv2QxWZYX6MNx88TbR9c6raPJgHNsAIWiKdEQDwlAuIpERBPiYB4SgTEUyIgnhIB8ZQIiKdEQLz9Es0rMZ6uGHti2nlTyPpnVgtIzs4E3tp+iSrXrp7bvEu2+Hfqs+VoT04G3lpciQo/sp8I8D8q9/ZYXTHlPZrzNH9W77AuhjbDtH3LY02PlAiaVTsmWh2Zshjl+wyt35X22pioeM8a0I66Ek2rcVBa71a9nLx5s+NLJfqR60HgP1VVov0h0vqFaP2Q+nV36ktkuhoa90KJys9ywpySzbVVZV/K9z4Craku0embpoe9memaEskQkF6aJzpqytKpzavxn5eomH4C2nT2jHUekXlrxXyUlN8727mPlp6FZtq5oAPadLjubE5PXp/lyKMvxeZDu/sM7Y6M8m+ztQc0zgpYIJ4SAfGUCIinREA8JQLiKREQT4mAeEoExFMiIJ4SAfGOSnRJ6e9XXowpXU5PmFLq7h8LYaFdRyXqfqJEl9MSfWT1+RAjaFlgicqTrX+FRpUlyq+YNj3Kj8/Kscwlpe5+fPnU9EiJoF31Y6L8yJjFaP77llK6V+x2/1f9mGjKvhBoTmWJxnUpbveBz+bkcnx0XqJxb+QFNKeyRLtDpM18c3mnrH5MZMYamlZfovKTn3BZX5ctB+tnrF2gQbvqS3QyYFnmp/94TLR8ye35icDbqZ8nOmnK3Knb6/NEOWMiaNfJM9Z5RG57o6TZ0X20VMxzlz+xME8ETTsq0a2YDLqtJ4lm0/omWiqu0c6fJ8q/0HUZtMsKWCCeEgHxlAiIp0RAPCUC4ikREE+JgHhKBMRTIiCeEgHxYvf2yH9us2oEaMi/8Eb96b5WVomgUeElWl5Eq0TQrvC9PS4pfSgRNC52b4/pfoISQdMC9/a4ZdlSImha4N4e+e05JYKmRe3t8bEeZCkRNC1qb4/LQd3q38APvI9/ZG8PYyJoWuDeHjklgqbF7u2xUCJomhWwQDwlAuIpERBPiYB4SgTEUyIgnhIB8ZQIiKdEQDwlAuIpERBPiYB4SgTEUyIgnhIB8ZQIiKdEQDwlAuIpERBPiYB4SgTEUyIgnhIB8ZQIiKdEQDwlAuIpERDvF9aU/2TcR0/vAAAAAElFTkSuQmCC" alt="" />
css选择器与DOM'匹配的关系的更多相关文章
- 30个你不可不知的CSS选择器
30个你不可不知的CSS选择器 一.五大基本选择符 1. *(通配符)*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标 ...
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- 转载:详解CSS选择器、优先级与匹配原
转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...
- CSS选择器、优先级和匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- CSS选择器从右向左的匹配规则
CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...
- 详解CSS选择器、优先级与匹配原理【转】
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动
刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...
- css选择器优选级及匹配原理(转)
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
随机推荐
- MU-MIMO学习
设备的认证查询 https://www.wi-fi.org/product-finder 1. MU-MIMO不会增大无线的最大速度 2. MU-MIMO需要路由器和客户端同时支持 3. 当你没有或者 ...
- Eclipse Android 代码自动提示功能 +导入 epf
1.设置 java 文件的代码提示功能 打 开 Eclipse 依次选择 Window > Preferences > Java > Editor - Content Assist ...
- 熟练使用Linux进程管理类命令
进程管理类命令 – ps命令 ps命令主要用于查看系统的进程 该命令的语法为:ps [参数] ps命令的常用参数选项有: -a:显示当前控制终端的进程(包含其他用户的). -u:显示进程的用户名和启动 ...
- Request模块(八)
Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “ ...
- 529. Minesweeper
▶ 扫雷的扩展判定.已知棋盘上所有点的情况(雷区 'M',已翻开空白区 'B',未翻开空白区 'E',数字区 '1' ~ '8'),现在给定一个点击位置(一定在空白区域),若命中雷区则将被命中的 M ...
- delphi 实体类 JSON 数组
delphi 实体类 与JSON转换,序列化 TJson REST.JSON.pas TJson.JsonToObjectTJson.ObjectToJsonString JsonEncode O ...
- sceneManager.loadscene加载场景时不会主动去加载场景的依赖包,要手动加载或添加场景到build setting列表中
假设有一场景1001.unity,,manifest文件如下: ManifestFileVersion: 0CRC: 425184873Hashes: AssetFileHash: serialize ...
- intellij idea运行Android程序时报错;Unable to locate adb within SDK
环境:intellij idea15 问题:运行Android时报错Throwable:Unable to locate adb within SDK 解决方法:在SDK安装目录的\platfor ...
- Vue 路由缓存
问题 在路由切换时不需要每次 点击都刷新子路由 尤其是在form表单的情况下 不能让用户 输入一半之后点击其他页面 再点回来 表单数据不见了 解决方案 vue 2.0 之中 有k ...
- python多线程与线程
进程与线程的概念 进程 考虑一个场景:浏览器,网易云音乐以及notepad++ 三个软件只能顺序执行是怎样一种场景呢?另外,假如有两个程序A和B,程序A在执行到一半的过程中,需要读取大量的数据输入(I ...