CSS之旅——第二站如何更深刻的理解各类选择器

时间 2019-11-10

标签 css 之旅第二如何深刻理解各类选择器栏目 CSS 繁體版

原文原文链接

　　上篇咱们说了为何要使用css，这篇咱们就从选择器提及，你们都知道浏览器会把远端过来的html解析成dom模型，有了dom模型，html就变成javascript

了xml格式，不然的话就是一堆“杂乱无章”的string，这样的话没人知道是什么鸟东西，js也没法什么各类getElementById，因此当浏览器解析成domcss

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

一：理解Dom模型java

首先咱们看下面的代码。jquery

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <p>有名的公司一栏</p>
 9     <hr />
10     <ul>
11         <li>百度</li>
12         <li>新浪</li>
13         <li>阿里</li>
14     </ul>
15 </body>
16 </html>

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

当你看到这个dom树的时候，是否是顿时感到信息量特别大，很简单，由于是树，因此就具备了一些树的特性，好比 “孩子节点”，“父亲节点”，chrome

“兄弟节点”，“第一个左孩子”，“最后一个左孩子”等等，对应着后续我要说的各类状况，一块儿来看看html被脱了个精光的感受是否是很爽~~~~浏览器

1：孩子节点dom

　　找孩子节点，本质上来讲分两种，真的只找“孩子节点”，“找到全部孩子（包括子孙）“ide

<1> 后代选择器

首先看下面的html，我想你能够垂手可得的绘制出dom树了，那下面的问题就是怎么将body中全部的后代span都绘上red。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         body span {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <span>我是span1</span>
14     <ul>
15         <li>
16             <ul><span>我是span2</span></ul>
17         </li>
18     </ul>
19 </body>
20 </html>

2. 孩子选择器

<1> ">"玩法

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

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title></title>
 5     <style type="text/css">
 6         body > span {
 7             color: red;
 8         }
 9     </style>
10 </head>
11 <body>
12     <span>我是span1</span>
13     <ul>
14         <li>
15             <ul><span>我是span2</span></ul>
16         </li>
17     </ul>
18 </body>
19 </html>

<2> ”伪选择器”玩法

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

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

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         body > span:nth-child(1) {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <span>我是span1</span>
14     <span>我是span2</span>
15     <ul>
16         <li>
17             <ul><span>我是span3</span></ul>
18         </li>
19     </ul>
20 </body>
21 </html>

3. 兄弟节点

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

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         .test + p {
 8             color:red;
 9         }
10     </style>
11 </head>
12 <body>
13     <p class="test">我是第一个段落</p>
14     <p>我是第二个段落</p>
15 
16 </body>
17 </html>

4. 属性选择器

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

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title></title>
 5     <style type="text/css">
 6         p[name='test'] {
 7             color: red;
 8         }
 9     </style>
10     <script src="Scripts/jquery-1.10.2.js"></script>
11 </head>
12 <body>
13     <p name="test">我是第一个段落</p>
14     <p>我是第二个段落</p>
15 </body>
16 </html>

到如今为止，有没有感受到和jquery的玩法如出一辙，并且感受愈来愈强烈，已经到了 ”你懂的“ 的境界。

二：css内部机制的猜想

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

p样式，但浏览器怎么就能找到dom中的全部的p元素呢？？？由于闭源的缘由，咱们没法得知其内部机制，不过在jquery上面，或者咱们能够窥知一

二，由于css能展现的选择器用法，在jquery中都能作获得，而后我就很火烧眉毛的去看看jquery如何提取个人各类选择器写法，下面咱们看看源码。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6 
 7 
 8     <style type="text/css">
 9         p[name='test'] {
10             color: red;
11         }
12     </style>
13 
14     <script src="Scripts/jquery-1.10.2.js"></script>
15     <script type="text/javascript">
16 
17         $(document).ready(function () {
18 
19  $("p[name='test']").hide(); 20         });
21     </script>
22 </head>
23 <body>
24     <p name="test">我是第一个段落</p>
25     <p>我是第二个段落</p>
26 </body>
27 </html>

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

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

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

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

CSS之旅——第二站 如何更深刻的理解各类选择器

CSS之旅——第二站如何更深刻的理解各类选择器