成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ID vs Class 老生常談的選擇器問題

Bowman_han / 3327人閱讀

摘要：昨天看了下那本秘籍在關(guān)于選擇器一章中提到應(yīng)該盡量避免使用選擇器這我就納悶了以前似乎沒太注意書中的理由是選擇器權(quán)重太高缺乏靈活性并且引用了一篇文章來闡述原因原文地址這里直接用原文中作者的原文地址來討論下作者的意思是在頁腳使用定義好鏈接顏色后將

昨天看了下那本《CSS3秘籍》, 在關(guān)于CSS選擇器一章中提到應(yīng)該盡量避免使用ID選擇器, 這我就納悶了, 以前似乎沒太注意, 書中的理由是ID選擇器權(quán)重太高, 缺乏靈活性, 并且引用了一篇文章來闡述原因(原文地址:When using IDs can be a pain in the class...) 這里直接用原文中作者的DEMO原文DEMO地址 來討論下,作者的意思是在頁腳使用.twitter a 定義好鏈接顏色后,將該鏈接加入到頁眉上時會由于頁眉使用了ID選擇器而受到干擾

Let’s imagine you’re building a site and one of the requirements is to have a reusable Twitter widget that needs to be placable wherever the client chooses. Let’s for example say they want to kick things off with having the widget in the header and also in-page, at the bottom of an article. The Twitter widget’s styling must remain consistent.

以下是demo的截圖:

這篇文章有一定道理, 在CSS布局時確實存在這個問題, 也不便于擴展,但是ID選擇器在JS中確是最快的, 因為JS查找ID元素時一經(jīng)找到就停止查找,而查找類元素則組要遍歷整個DOM, 這個問題在stackoverflow的討論(id vs class selection benchmark) 基于css布局與js性能的考慮, 我覺得是否可以在涉及js操作的DOM節(jié)點盡可能地使用ID 選擇器, 而在CSS布局上盡量避免, 比如一個HTML元素上既寫ID又寫Class ,ID用于JS操作, class用于css樣式布局,像這樣:

另外直接放個選擇器的測試網(wǎng)站,里面有包括jq,yui等框架選擇器的測試Speed/validity selectors test for frameworks.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86122.html

相關(guān)文章

  • css&html面試知識點

    摘要：第二等代表選擇器，如，權(quán)值為。接收端收到后，回傳一個帶有標志的數(shù)據(jù)包以示傳達確認信息。第四次揮手主動關(guān)閉方收到后，發(fā)送一個給被動關(guān)閉方，確認序號為收到序號，至此，完成四次揮手。 CSS優(yōu)先級算法 參考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...

    Bamboy 評論0 收藏0

  • css&html面試知識點

    摘要：第二等代表選擇器，如，權(quán)值為。接收端收到后，回傳一個帶有標志的數(shù)據(jù)包以示傳達確認信息。第四次揮手主動關(guān)閉方收到后，發(fā)送一個給被動關(guān)閉方，確認序號為收到序號，至此，完成四次揮手。 CSS優(yōu)先級算法 參考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...

    JeOam 評論0 收藏0

  • jQuery最佳實踐

    摘要：鏈式操作使用鏈式操作代替變量緩存和多次操作每當鏈長超過個鏈接或得到，因為活動任務(wù)的復雜，使用適當?shù)膿Q行和縮進使代碼的可讀性。對于較長的鏈式操作可以把對象緩存到一個變量里。 原文地址：http://lab.abhinayrathore.com/jquery-standards/ 第一次翻譯，有不對不妥的地方請拍磚。showImg(http://segmentfault.com/img/b...

    wizChen 評論0 收藏0

  • 前端面試題2（CSS）

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任...

    MangoGoing 評論0 收藏0

  • 前端面試題2（CSS）

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。 前端面試之CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任...

    zorro 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<