這篇文章主要講解了“CSS中的選擇器能做什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS中的選擇器能做什么”吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、城東網(wǎng)站維護、網(wǎng)站推廣。

大家都知道瀏覽器會把遠端過來的html解析成dom模型，有了dom模型，html就變成了xml格式，否則的話就是一堆“雜亂無章”的string，這樣的話沒人知道是什么鳥東西，js也無法什么各種getElementById，所以當瀏覽器解析成dom結(jié)構(gòu)后，瀏覽器才會很方便的根據(jù)css各種規(guī)則的選擇器在dom結(jié)構(gòu)中找到相應(yīng)的位置，那下一個問題自然就嚴重了，那就是必須深入的理解dom模型。

一：理解Dom模型

首先我們看下面的代碼。
 

代碼如下:

    
    


    
有名的公司一欄
    
    

        
百度
        
新浪
        
阿里
    

用這個代碼我們很容易的畫出dom樹。

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

“兄弟節(jié)點”，“第一個左孩子”，“最后一個左孩子”等等，對應(yīng)著后續(xù)我要說的各種情況，一起來看看html被脫了個精光的感覺是不是很爽~~~~

1：孩子節(jié)點

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

<1> 后代選擇器

首先看下面的html，我想你可以輕而易舉的繪制出dom樹了，那下面的問題就是怎么將body中所有的后代span都繪上red。
 

代碼如下:

    
    
    
        body span {
            color: red;
        }
    


    我是span1
    

        

            
我是span2
        
    

2. 孩子選擇器

<1>  ”>”玩法

這個也是我說的第二種情況，真的只找孩子節(jié)點，在css中也很簡單，用 > 號就可以了，是不是很有意思，跟jquery一樣的玩法，對不對。
 

代碼如下:

    
    
    
        body > span {
            color: red;
        }
    


    我是span1
    

        

            
我是span2
        
    

<2> ”偽選擇器”玩法

除了上面這種玩法，在css3中還可以使用”偽選擇器”玩法，真tmd的強大，下一篇會專門來講解，這里只介紹一個:nth-child用法，如果

你玩過jquery，一切都不是問題。
 

代碼如下:

    
    
    
        body > span:nth-child(1) {
            color: red;
        }
    


    我是span1
    我是span2
    

        

            
我是span3
        
    

3. 兄弟節(jié)點

兄弟節(jié)點也是很好理解的，在css中用 “+”就可以解決了，可以看到下面我成功將第二個p繪制成了紅色。
 

代碼如下:

    
    
    
        .test + p {
            color:red;
        }
    


    我是第一個段落

    
我是第二個段落
 

4. 屬性選擇器

如果玩過jquery，這個屬性選擇器我想非常清楚，首先看個例子，我想找到name=test的p元素，將其標紅。
 

代碼如下:

    
    
    
        p[name='test'] {
            color: red;
        }
    
    


    我是第一個段落

    
我是第二個段落

到現(xiàn)在為止，有沒有感覺到和jquery的玩法一模一樣，而且感覺越來越強烈，已經(jīng)到了 ”你懂的“ 的境界。

二：css內(nèi)部機制的猜測

文章開頭也說了，瀏覽器會根據(jù)css中定義的”標簽”，然后將這個標簽的樣式應(yīng)用到dom中指定的”標簽“上，就比如說，我在css中定義了一個

p樣式，但瀏覽器怎么就能找到dom中的所有的p元素呢？？？ 因為閉源的原因，我們無法得知其內(nèi)部機制，不過在jquery上面，或者我們可以窺知一

二，因為css能展示的選擇器用法，在jquery中都能做得到，然后我就很迫不及待的去看看jquery如何提取我的各種選擇器寫法，下面我們看看源碼。

代碼如下:

    
    
 
    
        p[name='test'] {
            color: red;
        }
    
 
    
    
 
        $(document).ready(function () {
 
            $("p[name='test']").hide();
        });
    


    我是第一個段落

    
我是第二個段落

在jquery里面經(jīng)過一番查找，最后可以看到僅僅是調(diào)用了queryselectorAll這個dom的原生方法，你也可以在console中清楚的看到，最后的

results就是找到的p元素，為了驗證，我在taobao page下開一個console。

到現(xiàn)在，我大概粗略的猜測，也許至少在chrome瀏覽器下，瀏覽器為了找到dom中指定的元素，或許也是調(diào)用了queryselectAll方法。。。

好了，大概也就說這么多了，理解dom模型是關(guān)鍵，這樣的話才能理解后續(xù)瀏覽器的渲染行為。

感謝各位的閱讀，以上就是“CSS中的選擇器能做什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS中的選擇器能做什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

新聞標題：CSS中的選擇器能做什么-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/csspip.html