您現在的位置是:電腦技術吧?>? 編程技術 ??>??能位匹配原理,能崗匹配原理??>??正文詳情

能位匹配原理,能崗匹配原理

朱雅安2019-11-08 10:01:51 人圍觀
簡介檔位跟速度怎么匹配看看一個簡單的CSS:div?divbox P span紅色{顏色:紅色;}。根據我們對這個CSS的理解,瀏覽器首先查找ID為divbox的div元素,然后查找檔速度如何匹配

看1個簡單的CSS:DIV#divBox p span.red{color:red;},按習慣我們對這個CSS 的理解是,瀏覽器先查找id為divBox的DIV元素,當找到后,再找其下的所有p元素,然后再查找所有span元素,當發現有span的class為red的時候,就應用該style。

多么簡單易懂的原理,可是這個理解卻是完完全全相反、錯誤的。

匹配原理:瀏覽器CSS匹配不是從左到右進行查找,而是從右到左進行查找。

比如之前說的 DIV#divBox p span.red{color:red;},瀏覽器的查找順序如下:先查找html中所有class='red'的span元素,找到后,再查找其父輩元素中是否有p元素,再判斷p的父元素中是否有id為divBox的div元素,如果都存在則匹配上。

瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。

比如如下html和css:代碼如下:  styleDIV#divBox p span.red{color:red;}stylebodydiv id=divBoxpspans1/span/ppspans2/span/ppspans3/span/ppspan class='red's4/span/p/div/body如果按從左到右查找,哪會先查找到很多不相關的p和span元素。

而如果按從右到左的方式進行查找,則首先就查找到span class='red'的元素。

firefox稱這種查找方式為key selector(關鍵字查詢),所謂的關鍵字就是樣式規則中最后(最右邊)的規則,上面的key就是span.red。

簡潔、高效的CSS:所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時候盡量進行少的查找,下面列出一些我們常見的寫CSS犯一些低效錯誤(也是我以前常常犯的錯誤,還老以為這樣寫才是高效的):1.不要在ID選擇器前使用標簽名一般寫法:DIV#divBox更好寫法:#divBox解釋: 因為ID選擇器是唯一的,加上div反而增加不必要的匹配。

2.不要再class選擇器前使用標簽名一般寫法:span.red更好寫法:.red解釋: 同第一條,但如果你定義了多個.red,而且在不同的元素下是樣式不一樣,則不能去掉,比如你css文件中定義如下:p.red{color:red;}span.red{color:#ff00ff}如果是這樣定義的就不要去掉,去掉后就會混淆,不過建議最好不要這樣寫3.盡量少使用層級關系一般寫法:#divBox p .red{color:red;}更好寫法:.red{..}4.使用class代替層級關系一般寫法:#divBox ul li a{display:block;}更好寫法:.block{display:block;}PS:看有些同學對從右到左的理論保持懷疑,下面貼出firefox和google的2篇相關css解釋的文章,供大家參考mozilla firefox:google page-speed:l

版權聲明:本文由 朱雅安 整理編輯。

原標題:人職匹配的基本原理,匹配濾波器的原理

轉載注明出處:http://www.dn9ww09s.icu/program/11530.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦打不開機怎么解決,電腦怎么打開機

    電腦打不開機怎么解決,電腦怎么打開機 相關圖片筆記本電腦打不開機怎么解決想必,用戶一定遇到過電腦無法開機的情況。很多人會在網上咨詢,“如果我不能打開電腦,我能做什么?”一些人會立即打電話給電腦維護人員進行維修...

  • dlink無線網卡怎么用,dlink無線網卡

    dlink無線網卡怎么用,dlink無線網卡 相關圖片無線網卡眾所周知,CPU以外的硬件設備是實現更多功能的工具,因此驅動程序在系統中起著重要的作用。因此,需要使用dlink無線網卡的用戶必須下載dlink無線網卡驅動程序無線網卡怎么...

  • 頁面加載,網頁加載不出來

    頁面加載,網頁加載不出來 相關圖片頁面訪問預加載是一種瀏覽器機制,它使用瀏覽器空閑時間來預下載/加載用戶下一步可能瀏覽的頁面/資源。當用戶訪問一個預先加載的鏈接時,如果他們從緩存中點擊,頁面可以快速顯...

  • 電腦應用程序沒有響應怎么辦,電腦所有程序都不響應

    電腦應用程序沒有響應怎么辦,電腦所有程序都不響應 相關圖片電腦突然很卡目前,物質生活水平有所提高,電腦的使用越來越多,但用戶也會遇到電腦故障,尤其是女生一旦電腦出故障,他們就不知道如何處理,最常見的是電腦運行速度有多慢。...

  • 靈活變通的意義,靈活排位有什么意義

    靈活變通的意義,靈活排位有什么意義 相關圖片做事靈活如果使用得當,向CSS文件添加注釋可以幫助您和開發過程中的其他人最常見的是為CSS樣式規則添加提示,但是使用注釋也可以幫助優化組織結構并改進實用工具提示和標簽是靈...

  • 筆記本鍵盤字母出現數字,筆記本鍵盤字母變數字

    筆記本鍵盤字母出現數字,筆記本鍵盤字母變數字 相關圖片筆記本鍵盤數字隨著筆記本電腦的逐步推廣,一些小問題會不時出現,這讓人們感到有些麻煩發現有些字母鍵被按下后變成數字一些用戶仍然認為鍵盤壞了,影響了操作怎么解決現在,...

  • 畫布canvas,多個canvas畫布

    畫布canvas,多個canvas畫布 相關圖片canvas清除畫布后重繪HTML5的畫布非常強大。它可以很容易地繪制貝塞爾曲線使用其畫布。它方便您將來使用,特別是用于共享實現代碼。有此要求者,請參考以下代碼:!DOCTYPE HTMcanvas畫...

  • 怎么設置默認瀏覽器,修改默認瀏覽器設置

    怎么設置默認瀏覽器,修改默認瀏覽器設置 相關圖片打開瀏覽器現在各種瀏覽器層出不窮有時為了滿足用戶的需求,很多用戶會在電腦上安裝多個瀏覽器,因此他們會爭先恐后地將自己設為默認瀏覽器。如何修改默認瀏覽器?現在,小編...

  • overflow:hidden,overflow屬性hidden

    overflow:hidden,overflow屬性hidden 相關圖片address overflow溢出:隱藏是一種常用的CSS樣式,但大多數人對這種樣式的理解僅限于隱藏溢出,并不知道浮動的含義。當談到清除浮動時,我們會想到另一種CSS樣式:clear:botoverflow...

  • 筆記本電腦怎么連wifi熱點,筆記本連不上熱點

    筆記本電腦怎么連wifi熱點,筆記本連不上熱點 相關圖片筆記本連接手機熱點連不上WiFi是一種允許電子設備連接到無線局域網的技術現在智能手機的用戶越來越受歡迎為了解決朋友“斷線”的“恐懼”和流量不足的問題,可以用筆記本打開...

熱評文章

  • 傳輸文件,怎樣用文件傳輸助手傳輸文件

    傳輸文件,怎樣用文件傳輸助手傳輸文件 相關圖片文件傳輸助手是什么當兩臺計算機在局域網中不可避免地需要傳輸文件時,在文件傳輸過程中會有很多限制。我們需要逐個設置這些限制,這樣就可以輕松地使用文件傳輸如何傳輸文件...

  • 表單的基本元素,表單元素都有哪些元素

    表單的基本元素,表單元素都有哪些元素 相關圖片表單元素都有什么類型HTML5的新表單元素:HTML5有幾個涉及表單的元素和屬性。本章介紹以下新的表單元素:datalistkeygenoutput瀏覽器支持輸入類型iefiref常見的表單元素有哪些...

  • 小米pro筆記本換顯卡,小米筆記本怎么換顯卡

    小米pro筆記本換顯卡,小米筆記本怎么換顯卡 相關圖片戴爾筆記本可以換顯卡嗎眾所周知,顯卡是計算機的一部分顯卡分為集成顯卡和獨立顯卡臺式機一般采用集成顯卡,臺式機的運行速度一般比筆記本電腦快如果筆記本的用戶遇到視頻卡...

  • 全屏背景圖,空間背景圖全屏

    全屏背景圖,空間背景圖全屏 相關圖片純色背景圖全屏幕的CSS正文背景圖像,無論分辨率如何在主體中嵌套一個img元素,并將img的Z索引控制為-1,代碼如下:img id=BG SRC=/圖像/BGJPG寬度背景圖可愛...

  • 本地連接2受限制或無連接,本地連接受限制或無連接

    本地連接2受限制或無連接,本地連接受限制或無連接 相關圖片本地連接受限制或無連接 xp在網絡飛速發展的今天,使用電腦上網已是不足為奇的事情了,不過也有的用戶在使用電腦的時候經常會遇到電腦本地連接受限制或無連接,那么該如何解決...

  • 三星連接電腦,三星手機連接電腦

    三星連接電腦,三星手機連接電腦 相關圖片臺式電腦怎么連wifi如果要將多媒體文件從手機導出到計算機,或將文件從計算機導入到手機。然后,將數據線與計算機連接,就可以實現這一功能但三星的用戶不知道如何連接現在,小...

  • border怎么用,border2

    border怎么用,border2 相關圖片border bottom首先,如果你曾經用表來制作網頁,你應該知道如何在表中畫一條虛線你需要畫一張很小的畫來填滿它事實上,我們有一個更簡單的方法。只需在TD/TD中添加這樣一個段落,就...

  • 無線路由器怎么設置,怎么樣設置路由器

    無線路由器怎么設置,怎么樣設置路由器 相關圖片怎么設置路由器wifi現在WiFi無線路由器非常普遍,基本上家家戶戶都有寬帶,并且安裝了WiFi不過,對于了解網絡技術的人來說,無線路由器的設置是一件非常簡單的事情,對于新手來說...

  • webkit,webkit2

    webkit,webkit2 相關圖片nodewebkit上一篇文章介紹了HTML5的一些新特性和技巧現在我們將總結更多的HTML、CSS和JavaScript的WebKit特性。HTML,從HTML文檔的開始到結束:webkit是什么意思...

  • 電腦如何設置鬧鐘,電腦設置鬧鐘提醒

    電腦如何設置鬧鐘,電腦設置鬧鐘提醒 相關圖片電腦可以調鬧鐘嗎每個人都知道鬧鐘可以在手機上設定其實,電腦也有鬧鐘的功能它很新鮮,設置也很簡單我們只需要在指定的時間內設置并運行指定的播放軟件。考慮到很多用戶還沒...

關注微信

变脸官网查询