一道面试题

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'匹配的关系的更多相关文章

  1. 30个你不可不知的CSS选择器

    30个你不可不知的CSS选择器   一.五大基本选择符 1. *(通配符)*通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标 ...

  2. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  3. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  4. 转载:详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  6. CSS选择器从右向左的匹配规则

    CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...

  7. 详解CSS选择器、优先级与匹配原理【转】

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  8. [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动

    刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...

  9. css选择器优选级及匹配原理(转)

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

随机推荐

  1. MU-MIMO学习

    设备的认证查询 https://www.wi-fi.org/product-finder 1. MU-MIMO不会增大无线的最大速度 2. MU-MIMO需要路由器和客户端同时支持 3. 当你没有或者 ...

  2. Eclipse Android 代码自动提示功能 +导入 epf

    1.设置 java 文件的代码提示功能 打 开 Eclipse 依次选择 Window > Preferences > Java > Editor - Content Assist ...

  3. 熟练使用Linux进程管理类命令

    进程管理类命令 – ps命令 ps命令主要用于查看系统的进程 该命令的语法为:ps [参数] ps命令的常用参数选项有: -a:显示当前控制终端的进程(包含其他用户的). -u:显示进程的用户名和启动 ...

  4. Request模块(八)

    Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “ ...

  5. 529. Minesweeper

    ▶ 扫雷的扩展判定.已知棋盘上所有点的情况(雷区 'M',已翻开空白区 'B',未翻开空白区 'E',数字区 '1' ~ '8'),现在给定一个点击位置(一定在空白区域),若命中雷区则将被命中的 M ...

  6. delphi 实体类 JSON 数组

    delphi 实体类 与JSON转换,序列化 TJson REST.JSON.pas   TJson.JsonToObjectTJson.ObjectToJsonString JsonEncode O ...

  7. sceneManager.loadscene加载场景时不会主动去加载场景的依赖包,要手动加载或添加场景到build setting列表中

    假设有一场景1001.unity,,manifest文件如下: ManifestFileVersion: 0CRC: 425184873Hashes: AssetFileHash: serialize ...

  8. intellij idea运行Android程序时报错;Unable to locate adb within SDK

    环境:intellij idea15 问题:运行Android时报错Throwable:Unable to locate adb within SDK   解决方法:在SDK安装目录的\platfor ...

  9. Vue 路由缓存

    问题 在路由切换时不需要每次 点击都刷新子路由   尤其是在form表单的情况下  不能让用户 输入一半之后点击其他页面  再点回来 表单数据不见了 解决方案   vue 2.0     之中  有k ...

  10. python多线程与线程

    进程与线程的概念 进程 考虑一个场景:浏览器,网易云音乐以及notepad++ 三个软件只能顺序执行是怎样一种场景呢?另外,假如有两个程序A和B,程序A在执行到一半的过程中,需要读取大量的数据输入(I ...