一道面试题

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. phpcms模块开发中的小问题及解决方法

    1.模块菜单中文名出错 在编写安装模块时候可能需要更改extention.inc.php中定义中文名称,由于反复安装或者通过phpcms的扩展->菜单管理 修改菜单名会导致中文名失败.解决办法很 ...

  2. [失败]SystemTap和火焰图(Flame Graph)

    本文参考http://blog.51cto.com/xuclv/1184517 SystemTap简介: SystemTap provides free software (GPL) infrastr ...

  3. 值得推荐的开源C/C++框架和库

    值得学习的C语言开源项目   - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工 ...

  4. 用TImageList动态画透明图片

    procedure TForm1.Button1Click(Sender: TObject); var bm : TBitmap; il : TImageList; begin bm := TBitm ...

  5. sdc-docker

    ssh root@109.105.7.96 sdc-login docker /opt/smartdc/docker ls /var/svc/log/ cat smartdc-application- ...

  6. 安装labelImg

    上篇文章,我提到了安装这个工具时,遇到pyqt与sip版本不匹配的未解决问题,最后是通过windows版本一键实现的,工具包见下面链接. 参考:http://blog.csdn.net/jesse_m ...

  7. 28. Implement strStr() (String)

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...

  8. LUA Metatables

    __index:当我们访问一个表中的元素不存在时,则会触发去寻找__index元方法,如果不存在,则返回nil,如果存在,则返回结果. 博主注:__index有点像异常处理的意思 __newindex ...

  9. gradle 构建测试

    以后决不能再犯此类低级错误

  10. win10,python连接mysql报”Can't connect to MySQL server on 'localhost' (10061)”

    一.环境及问题描述 1. 环境 操作系统:win10家庭版,64bit python版本:Python 2.7.15 mysql版本:mysql 5.4.3 2. 问题描述 最近跟公司申请电脑,预装w ...