CSS之旅——第二站 如何更深入的理解各種選擇器

一線碼農發表於2015-05-03
CSS

　　上篇我們說了為什麼要使用css，這篇我們就從選擇器說起，大家都知道瀏覽器會把遠端過來的html解析成dom模型，有了dom模型，html就變成

了xml格式，否則的話就是一堆“雜亂無章”的string，這樣的話沒人知道是什麼鳥東西，js也無法什麼各種getElementById，所以當瀏覽器解析成dom

結構後，瀏覽器才會很方便的根據css各種規則的選擇器在dom結構中找到相應的位置，那下一個問題自然就嚴重了，那就是必須深入的理解dom模型。

 

一：理解Dom模型

    首先我們看下面的程式碼。

 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樹。

 

當你看到這個dom樹的時候，是不是頓時感到資訊量特別大，很簡單，因為是樹，所以就具有了一些樹的特性，比如 “孩子節點”，“父親節點”，

“兄弟節點”，“第一個左孩子”，“最後一個左孩子”等等，對應著後續我要說的各種情況，一起來看看html被脫了個精光的感覺是不是很爽~~~~

 

1：孩子節點

　　   找孩子節點，本質上來說分兩種，真的只找“孩子節點”，“找到所有孩子（包括子孫）“

 

<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模型是關鍵，這樣的話才能理解後續瀏覽器的渲染行為。  

 

相關文章