css 選擇器使用之注意事項
!!!!一切程式碼要以效率為主。效率既是金錢。
CSS選擇符是從右到左進行匹配的。從右到左!所以,#nav li 我們以為這是一條很簡單的規則,秒秒鐘就能匹配到想要的元素,但是,但是,但是,是從右往左匹配啊,所以,會去找所有的li,然後再去確定它的父元素是不是#nav。,因此,寫css的時候需要注意:
- dom深度儘量淺。
- 減少inline javascript、css的數量。
- 使用現代合法的css屬性。
- 不要為id選擇器指定類名或是標籤,因為id可以唯一確定一個元素。
- 避免後代選擇符,儘量使用子選擇符。原因:子元素匹配符的概率要大於後代元素匹配符。後代選擇符;#tp p{} 子選擇符:#tp>p{}
- 避免使用萬用字元,舉一個例子,.mod .hd *{font-size:14px;} 根據匹配順序,將首先匹配萬用字元,也就是說先匹配出萬用字元,然後匹配.hd(就是要對dom樹上的所有節點進行遍歷他的父級元素),然後匹配.mod,這樣的效能耗費可想而知.
相關推薦
CSS選擇器之偽類選擇器(偽元素)
寫法 cor outline p標簽 而不是 edit 實現 after tab selection [CSS4]應用於文檔中被用戶高亮的部分(比如使用鼠標或其他選擇設備選中的部分)。(IE8及以下不支持)(火狐-moz-selection)
CSS選擇器之兄弟選擇器(~和+)
spa 例子 inf 代碼 但是 info 發現 效果 說話 今天在改以以前人家寫的網頁的樣式的時候,碰到這個選擇器,‘~’,當時我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的區別,雖然我知道他們都是
CSS:CSS選擇器之【組合選擇器】
前言 組合使用不同的選擇器可以匹配更特定的元素。有的複合選擇器能將目標樣式應用到更多元素,有的複合選擇器則會鎖定更少元素,總之會讓你的選擇非常具體。複合選擇器主要包括:群組選擇器、後代選擇器、子選擇器和同級元素選擇器。 群組選擇器 群組選擇器的使用範疇
CSS:CSS選擇器之【基本選擇器】
概述 CSS選擇器的作用是找出某類元素,以便我們使用style元素或者外部樣式表對這類元素設定樣式。CSS的基礎選擇器主要有三個:標籤選擇器、類選擇器、id選擇器和屬性選擇器。 通用選擇器 通用選擇器匹配文件中的所有元素。它是最基本的選擇器,不過很少使
CSS選擇器之最常見的交集選擇器和並集選擇器
由於太常見,上篇文章漏掉了2種最常見的組合選擇器:1.並集選擇器S1,S2[,S3...]2.交集選擇器S1S2[S3...],注意交集選擇器的各個選擇器的排列順序是要遵循能被解析的原則的(For Example:選擇p和.class1的交集,p.class1可行,但是.cl
足球系統平臺出租.CSS:CSS選擇器之【組合選擇器】
前言組合使用不同的選擇器可以匹配更特定的元素。有的複合選擇器能將目標樣式應用到更多元素,有的複合選擇器則會鎖定更少元素,總之會讓你的選擇非常具體。複合選擇器主要包括:群組選擇器、後代選擇器、子選擇器和同級元素選擇器。一、群組選擇器群組選擇器的使用範疇是,多個選擇器使用同一個樣
CSS:CSS選擇器之【偽類/元素選擇器】
前言 目前為止,我們已經學習瞭如何使用HTML文件中定義的元素選擇文件的內容。CSS中還定義了偽選擇器,它們提供了更復雜的功能,但非直接對應HTML文件應以的元素。偽選擇器主要分兩種:偽元素和偽類。 偽元素選擇器 該類選擇器主要用於向指定的選擇器新增指
CSS選擇器之【偽類/元素選擇器】
前言 目前為止,我們已經學習瞭如何使用HTML文件中定義的元素選擇文件的內容。CSS中還定義了偽選擇器,它們提供了更復雜的功能,但非直接對應HTML文件應以的元素。偽選擇器主要分兩種:偽元素和偽類。 一、偽元素選擇器 1):first-
css 選擇器使用之注意事項
!!!!一切程式碼要以效率為主。效率既是金錢。 CSS選擇符是從右到左進行匹配的。從右到左!所以,#nav li 我們以為這是一條很簡單的規則,秒秒鐘就能匹配到想要的元素,但是,但是,但是,是從右往左匹配啊,所以,會去找所有的li,然後再去確定它的父元素是不是#n
python--前端之CSS(css頁面引入方法、選擇器之基本選擇器、組合選擇器)
gin 如果 優點 選擇器 alt 前端 設置字體 行高 常用 CSS產生背景: 為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生,CSS是 Cascading Style Sheets 的首字母縮寫,意思是層疊樣式表。 有了CSS,ht
我的web前端學習之路-CSS-選擇器
選擇 產生 之路 css 註意 images nbsp 前端 ges 選擇器指定了要作用的標簽 直接指定一個準確元素名,對其產生作用 指定標簽元素class屬性的值,可選指定特定的標簽元素,不要忘記“點”! (註意!!)class屬性的值可以用空格隔開表示多個cla
html之css選擇器語法學習筆記
mil post ges inf important 類名 想要 geo none 相關內容: css選擇器的用法: 選擇器的語法 標簽選擇器 類選擇器 id選擇器 選擇器的分組 嵌套選擇 屬性選擇器 子標簽選擇器 相鄰兄弟選擇器 參考資料:w3school
css編輯檢視之css選擇器
CSS的選擇器 選擇器( selector )也被稱之為選擇符,所有的HTML標籤在CSS中都需要使用選擇器來進行控制,選擇器不僅僅只是HTML的標籤,還可以是ID選擇器,類選擇器(請與 JAVA中的類分開) ,或者元素的某些狀態( a:ink, a:hover....),根據CSS標籤,常
HTML+CSS第六課:初識CSS之CSS選擇器的使用、為HTML文件新增CSS樣式的3種方式
知識點:CSS的概念及語法、CSS選擇器的使用、CSS選擇器的優先順序、新增CSS樣式的3種方式。 1、CSS概念理解 CSS 是Cascading Style Sheet的縮寫,可以翻譯為“層疊樣式表”或者“級聯樣式表”,即“樣式
jQuery之CSS選擇器的處理機制
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery的第一個demo</title> <script src="j
凜冬之翼---css選擇器基礎
設計一個很簡單的導航欄,沒有想象得那麼難。總體上css和html寫程式碼沒有演算法那麼複雜和用腦但是還是要花很多時間去了解原理。 html程式碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h
CSS的選擇器之基本選擇器
doctype lin erl ext meta red itl size yellow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
CSS選擇器的詳細說明(有誤之處請指教)
CSS的選擇器可分為以下幾種,個人經歷,其中1~6,8用的最多,7,9用得少: 1.元素選擇器 2.類選擇器(class) 3.id選擇器 4.屬性選擇器 5.後代選擇器和子元素選擇器 6.
Python爬蟲框架 scrapy之xpath選擇器 css選擇器
文章目錄 一 、xpath 1、節點選擇 二、 css css選擇 三、xpath函式操作 1
前端之CSS:CSS選擇器 前端之css樣式(選擇器)。。。
前端之css樣式(選擇器)。。。 一、css概述 CSS是Cascading Style Sheets的簡稱,中文稱為層疊樣式表,對html標籤的渲染和佈局