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>