一道面试题

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. ipython的使用

    改初始路径 还有一个坑,可以用notebook打开一个已经存在的文件,但是不能正常编辑(使用单元编辑),因为使用这个创建的东西根本就不是一个.py文件,如果代码编辑完毕,倒是可以通过下载那里选择下载成 ...

  2. Linux下搭建企业共享目录方案之------samba

    Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的一种通 ...

  3. mysql-6正则表达式

    mysql正则表达式 匹配的两种方式: 1.模糊匹配:like 2.正则表达式 正则表达式语法: 语法 说明 ^ 起始位置.如果设置了RegExp对象的Multiline属性,^也匹配'\n'或'\r ...

  4. SqlServer快速获得表总记录数(大数据量)

    --第1种 执行全表扫描才能获得行数 SELECT count(*) FROM BUS_tb_UserGradePrice --第2种 执行扫描全表id不为空的,获得行数 select count(u ...

  5. Linux Storage Stack Diagram存储堆栈图

    这是一个描述非常好的存储栈,版本为:Linux Storage Stack Diagram v4.10,我在这里转载下图片,可以提升大家对存储栈的理解. https://www.thomas-kren ...

  6. Python web框架——Tornado

    Tornado是一个Python Web框架和异步网络库,最初由FriendFeed开发.通过使用非阻塞网络I / O,Tornado可以扩展到数万个开放连接,使其成为需要长时间连接每个用户的长轮询, ...

  7. svn 技巧

    参考:https://blog.csdn.net/wlccomeon/article/details/20398923

  8. 二维码名片的格式 - vcard(非常好,可直接添加到手机通讯录)

    分享到 一键分享 QQ空间 新浪微博 百度云收藏 人人网 腾讯微博 百度相册 开心网 腾讯朋友 百度贴吧 豆瓣网 搜狐微博 百度新首页 QQ好友 和讯微博 更多... 百度分享   登录|注册     ...

  9. 「小程序JAVA实战」小程序开源搜索组件(53)

    转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxukaiyuansousuozujian52/ 上次说了可以在视频中通过 ...

  10. Windows Git 服务器 客户端 Delphi Git配置

    装Git后本地单机版就有了版本管理功能. git 使用记录 git 客户端 这2个工具足够用. git for windows,http://git-scm.com/download/,Git-1.9 ...