盒子的标志与装扮

前言

通过前面几篇博文的介绍，我们应该大概搞懂了浏览器上页面的元素都是盒子并且盒子摆放在浏览器上的方法了。于是我们开始要打扮了，女卫悦己者容，美观交互性强的网站将会为你带来更多的访客。

 

装扮的前提

盒子摆好了，你可能要让我告诉你怎么装扮了！

那你就把第一个盒子的边框涂成蓝色吧。

于是，这个时候你傻眼了，地板上这么多盒子，哪个才是第一个盒子啊！？然后你只能干巴巴的什么事情都做不了。

也许是我描述不清楚又或者是你理解有问题造成的。

其实浏览器也是如此，当CSS描述不清楚又或者遇到浏览器不懂的地方时，它只能被迫停止装扮的动作。

那好吧，到底要怎么样才算描述清楚？

或许我们尝试给盒子标号，这个应该是个很不错的想法，GO！于是我把每个盒子都命名了，什么Tom,Mary都有了。

这次我告诉你说请把Tom的边框变成蓝色。

这次，你终于解脱了，知道该怎么做了，先找到名字为Tom的盒子，然后对它的边框进行染色，DONE！

那对于浏览器来说，我们也可以对我们的盒子进行标识，比如说可以给盒子加上一个id="Tom"，这样盒子就被标识了。

你通过CSS的描述，例如:#Tom {border-color:blue;}就可以将盒子的边框变成蓝色了（其中#是为了告诉浏览器后边的英文是盒子的id）。

对于CSS的语法规则我就不描述了，搜索一下一大堆好的文章可以阅读了解。

回想一下，我们是如何讲盒子描述出来的，通过一个标志！？或者说是通过一个“选择器”吧。我们通过了这个“选择器”把指定的盒子从这一堆盒子中辨别出来了，当然这个选择器可以一下子选好几个盒子，也可以选择一个，甚至零个都行。

至于选择器的概念，我点到为止。

 

装扮的层叠关系

搜一下就应该知道CSS全称是：Cascading Style Sheet，翻译过来就是 “ 层叠样式表”或“级联样式表”。

我知道样式大概的意思就是用来描述一些样子外观，那层叠是什么意思！？

假设我告诉你：请把所有的盒子的背景染成红色，然后我又告诉你，把那个叫做Tom的盒子的背景染成黄色并且把它的边框染成红色。

于是你会发现，最后装扮的结果就是，除了Tom这个盒子外，其他的盒子背景都是红色了，Tom的背景变成黄色并且有了红色的边框。

有没有发现，这里的选择器叠加了，2个选择器都可以标志到Tom这个盒子！于是浏览器按照这两个选择器的优先级，把它们描述的装扮给渲染出来。就像我们把每个选择器的描述都画在一张纸上，然后把全部的纸按照某个顺序叠起来得到最终的样子，不知道这样的描述能不能使得读者明白，只能点到这为止了。

 

本篇总结

本篇的重点是引出CSS选择器的概念，这无论对于页面上样式布局有很大作用，也为JS操作这些盒子提供了一种寻找定位的方法！