如何发布网络小说,天蚕土豆

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

掌握CSS匹配原理，編寫(xiě)完美CSS代碼

本節(jié)和大家重點(diǎn)討論一下CSS查找匹配原理和簡(jiǎn)潔高效的CSS代碼的編寫(xiě)，所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時(shí)候盡量進(jìn)行少的查找，相信本文介紹一定會(huì)讓你有所收獲的。

成都創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比翔安網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式翔安網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋翔安地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴(lài)。

了解CSS的查找匹配原理，寫(xiě)更簡(jiǎn)潔高效的CSS代碼

使用了這么多年的CSS，現(xiàn)在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？看1個(gè)簡(jiǎn)單的CSS：

 
 
 
  
  
  DIV#divBoxpspan.red{color:red;}

按習(xí)慣我們對(duì)這個(gè)CSS的理解是，瀏覽器先查找id為divBox的DIV元素，當(dāng)找到后，再找其下的所有p元素，然后再查找所有span元素，當(dāng)發(fā)現(xiàn)有span的class為red的時(shí)候，就應(yīng)用該style。多么簡(jiǎn)單易懂的原理，可是這個(gè)理解卻是完完全全相反、錯(cuò)誤的。

CSS匹配原理：

瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。比如之前說(shuō)的DIV#divBoxpspan.red{color:red;}，瀏覽器的查找順序如下：

先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則CSS匹配上。

瀏覽器從右到左進(jìn)行查找的好處是為了盡早過(guò)濾掉一些無(wú)關(guān)的樣式規(guī)則和元素。比如如下html和css: