上篇我们说了为什么要使用css，这篇我们就从选择器说起，大家都知道浏览器会把远端过来的html解析成dom模型，有了dom模型，html就变成

了xml格式，否则的话就是一堆“杂乱无章”的string，这样的话没人知道是什么鸟东西，js也无法什么各种getElementById，所以当浏览器解析成dom

结构后，浏览器才会很方便的根据css各种规则的选择器在dom结构中找到相应的位置，那下一个问题自然就严重了，那就是必须深入的理解dom模型。

一：理解Dom模型

首先我们看下面的代码。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <p>有名的公司一栏</p>

     <hr />

     <ul>

         <li>百度</li>

         <li>新浪</li>

         <li>阿里</li>

     </ul>

 </body>

 </html>

用这个代码我们很容易的画出dom树。

当你看到这个dom树的时候，是不是顿时感到信息量特别大，很简单，因为是树，所以就具有了一些树的特性，比如 “孩子节点”，“父亲节点”，

“兄弟节点”，“第一个左孩子”，“最后一个左孩子”等等，对应着后续我要说的各种情况，一起来看看html被脱了个精光的感觉是不是很爽~~~~

1：孩子节点

　　   找孩子节点，本质上来说分两种，真的只找“孩子节点”，“找到所有孩子（包括子孙）“

<1> 后代选择器

首先看下面的html，我想你可以轻而易举的绘制出dom树了，那下面的问题就是怎么将body中所有的后代span都绘上red。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         body span {

             color: red;

         }

     </style>

 </head>

 <body>

     <span>我是span1</span>

     <ul>

         <li>

             <ul><span>我是span2</span></ul>

         </li>

     </ul>

 </body>

 </html>

2. 孩子选择器

<1>  ">"玩法

　  这个也是我说的第二种情况，真的只找孩子节点，在css中也很简单，用 > 号就可以了，是不是很有意思，跟jquery一样的玩法，对不对。

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         body > span {

             color: red;

         }

     </style>

 </head>

 <body>

     <span>我是span1</span>

     <ul>

         <li>

             <ul><span>我是span2</span></ul>

         </li>

     </ul>

 </body>

 </html>

<2> ”伪选择器”玩法

除了上面这种玩法，在css3中还可以使用”伪选择器"玩法，真tmd的强大，下一篇会专门来讲解，这里只介绍一个:nth-child用法，如果

你玩过jquery，一切都不是问题。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         body > span:nth-child(1) {

             color: red;

         }

     </style>

 </head>

 <body>

     <span>我是span1</span>

     <span>我是span2</span>

     <ul>

         <li>

             <ul><span>我是span3</span></ul>

         </li>

     </ul>

 </body>

 </html>

3. 兄弟节点

兄弟节点也是很好理解的，在css中用 “+”就可以解决了，可以看到下面我成功将第二个p绘制成了红色。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         .test + p {

             color:red;

         }

     </style>

 </head>

 <body>

     <p class="test">我是第一个段落</p>

     <p>我是第二个段落</p>

 </body>

 </html>

4. 属性选择器

　 如果玩过jquery，这个属性选择器我想非常清楚，首先看个例子，我想找到name=test的p元素，将其标红。

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         p[name='test'] {

             color: red;

         }

     </style>

     <script src="Scripts/jquery-1.10.2.js"></script>

 </head>

 <body>

     <p name="test">我是第一个段落</p>

     <p>我是第二个段落</p>

 </body>

 </html>

到现在为止，有没有感觉到和jquery的玩法一模一样，而且感觉越来越强烈，已经到了 ”你懂的“ 的境界。

二：css内部机制的猜测

文章开头也说了，浏览器会根据css中定义的”标签”，然后将这个标签的样式应用到dom中指定的”标签“上，就比如说，我在css中定义了一个

p样式，但浏览器怎么就能找到dom中的所有的p元素呢？？？ 因为闭源的原因，我们无法得知其内部机制，不过在jquery上面，或者我们可以窥知一

二，因为css能展示的选择器用法，在jquery中都能做得到，然后我就很迫不及待的去看看jquery如何提取我的各种选择器写法，下面我们看看源码。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         p[name='test'] {

             color: red;

         }

     </style>

     <script src="Scripts/jquery-1.10.2.js"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             $("p[name='test']").hide();

         });

     </script>

 </head>

 <body>

     <p name="test">我是第一个段落</p>

     <p>我是第二个段落</p>

 </body>

 </html>

在jquery里面经过一番查找，最后可以看到仅仅是调用了queryselectorAll这个dom的原生方法，你也可以在console中清楚的看到，最后的

results就是找到的p元素，为了验证，我在taobao page下开一个console。

到现在，我大概粗略的猜测，也许至少在chrome浏览器下，浏览器为了找到dom中指定的元素，或许也是调用了queryselectAll方法。。。

好了，大概也就说这么多了，理解dom模型是关键，这样的话才能理解后续浏览器的渲染行为。

CSS之旅——第二站 如何更深入的理解各种选择器的更多相关文章

  1. Javascript之旅——第二站：对象和数组

    一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象   说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也 ...

  2. CSS之旅——第一站 为什么要用CSS

    不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻...既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说 CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容 ...

  3. Sql Server之旅——第二站 理解万恶的表扫描

    很久以前我们在写sql的时候,最怕的一件事情就是sql莫名奇妙的超级慢,慢的是撸一管子回来,那个小球还在一直转...这个着急也只有当事人才 明白,后来听说有个什么“评估执行计划“,后来的后来才明白应该 ...

  4. 敏捷开发系列之旅 第二站（走近XP极限编程）

    http://blog.csdn.net/happylee6688/article/details/21551065 上篇文章,我们探讨了什么是敏捷开发,以及敏捷开发的方法学.在这篇文章中,我们将继续 ...

  5. asp.net mvc 之旅—— 第二站 窥探Controller下的各种Result

    平时我们在Action中编码的时候,我们都知道所有的Action返回值类型都是ActionResult,并且我们的返回值也是各种奇葩,比如:Json(),Content(), View()等等...当 ...

  6. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  7. Python面向对象，站在更高的角度来思考

    开篇 面向过程编程和面向对象编程是两种基本的编程思想. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去 ...

  8. 2014年度辛星css教程夏季版第二节

    第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...

  9. LWIP network interface 即 LWIP 的 硬件 数据 接口 移植 详解 STM32 以太网数据 到达 的第二站: void ethernetif_input( void * pvParameters )

    根据 上一篇 文章 , ETH  DMA 数据中断 会 发送 一个信号量 ,我使用 全局 搜索 这个信号量 s_xSemaphore 得到 一下 几个 值 根据 这个 分析  我们找到了   数据 的 ...

随机推荐

  1. Win10 IoT C#开发 5 - 操作 IoT 设备内嵌 SQLite 数据库 CURD

    Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. 前几章我 ...

  2. Delphi iOS 开启文件共享 UIFileSharingEnabled

    Apple 在 iOS 提供了文件共享(FileSharing)功能,让 App 有一个对外窗口的目录,透过 iTunes 可以任意管理这个目录的文档内容(可拖入文档,也能将文档拖出备份). 如果 A ...

  3. Scalaz（4）－ typeclass：标准类型－Equal,Order,Show,Enum

    Scalaz是由一堆的typeclass组成.每一个typeclass具备自己特殊的功能.用户可以通过随意多态(ad-hoc polymorphism)把这些功能施用在自己定义的类型上.scala这个 ...

  4. iOS 获取网络图片的大小

    一直都在找关于获取网络图片的大小的方法, 今天找到了一个能解决的办法 ,如下 1, 导入框架 #import <ImageIO/ImageIO.h> 2. 使用此方法得到image的siz ...

  5. Python遍历文件夹

    许多次需要用python来遍历目录下文件, 这一次就整理了记录在这里. 随实际工作,不定期更新. import os class FileTraversal: def __init__(self, r ...

  6. redis事务详解

    mysql中也存在事务的概念.其实事务的定义是一样的.一组操作的集合,作为一个整体,要么全执行,要么全不执行. redis设置事务三步骤: 开始事务 :multi 操作加入事务队列 执行事务 :exe ...

  7. socket.io，环境搭建 & Hello world

    原文:http://www.cnblogs.com/xiezhengcai/p/3955827.html socket.io 一个与服务器实时通信的工具,它与原生的webSocket相比,具有更可靠. ...

  8. js的动态加载、缓存、更新以及复用（二）

    上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js.requrieJS.sea.js.lab.js等.这个开阔了眼界,以前只知道sea.js,省去了自己搜索 ...

  9. 第一次写jquery插件，来个countdown计时器吧

    之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过 ...

  10. windows 下配置 nginx的问题

    1.存放nginx的目录最好是英文目录,如果存放到中文目录下启动时有问题: 未完,待续...