一道面试题

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. postman全方位讲解(有空看下)

    Postman 接口测试神器 Postman 是一个接口测试和 http 请求的神器,非常好用. 官方 github 地址: https://github.com/postmanlabs Postma ...

  2. charles手机抓包配置-1

    1.下载和安装Charles 下载和安装Charles软件.安装前要先安装Java运行环境,因为Charles是Java写的. 自己百度云上有破解版 2.安装电脑的Charles证书,对证书进行信任设 ...

  3. Bootstrap-CL:列表组

    ylbtech-Bootstrap-CL:列表组 1.返回顶部 1. Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: ...

  4. secureCRT下linux rz命令上传文件失败或变小(破损)的问题解决方法

    在使用secureCRT的linux服务器时候,很多时候需要安装软件,而服务器本身是没有连接外网的 ,这时候就需要用到rz命令了. 在使用rz命令时候,有时候上传文件会失败,是因为上传的文件流中包含某 ...

  5. 使用Fiddler对Android手机的应用数据进行抓包分析

    文章源自: http://blog.csdn.net/zshq280017423/article/details/8928616/ 对于Android开发的同事最头疼的事情莫过于真机抓包,然后Fidd ...

  6. leetcode225

    public class MyStack { Queue<int> Q = new Queue<int>(); /** Initialize your data structu ...

  7. 可视化库-Matplotlib-盒图(第四天)

    盒图由五个数值点组成,最小观测值,下四分位数,中位数,上四分位数,最大观测值 IQR = Q3 - Q1  Q3表示上四分位数, Q1表示下四分位数,IQR表示盒图的长度 最小观测值 min =Q1 ...

  8. JAVA 非对称加密工具

    import java.io.File; import java.io.FileInputStream; import java.math.BigInteger; import java.securi ...

  9. 让 IE6支持max-height

    min-height min-height:100px; _height:100px max-height max-height:200px; overflow:auto;/*超出部分显示滚动条*/ ...

  10. 使用ES-Hadoop 6.5.4编写MR将数据索引到ES

    目录 1. 开发环境 2. 下载地址 3. 使用示例 4. 参考文献 1. 开发环境 Elasticsearch 6.5.4 ES-Hadoop 6.5.4 Hadoop 2.0.0 2. 下载地址 ...