emmet語法的前身是zen coding,它使用縮寫來提高html/css的編寫速度。
1、生成標籤直接輸入標籤名按tab鍵即可
2、生成多個相同標籤,加上*即可
3、生成父子級關係的標籤,可以用》
4、生成兄弟關係的標籤,可以用+
5、生成帶有類名的或者id名字的,直接寫.demo或者#demo
6、生成div類名有順序,加上自增符號$
7、生成標籤的內部寫內容,用{}表示
css基本採取簡寫形式即可
1、比如w200 按tab生成width:200px;
2、比如lt26 按tab生成line-height:26px;
根據選擇器的型別分為基礎選擇器和復合選擇器。
復合選擇器是建立在基礎選擇器之上,對基本選擇器進行組合形成的。
1、復合選擇器可以更準確、更高效的選擇目標元素(標籤)
2、復合選擇器由倆個或者多個基礎選擇器,通過不同的方式組合而成的
3、常用的復合選擇器包括:後代選擇器、子選擇器、並集選擇器、偽類選擇器等等
後代選擇器又稱為包含選擇器,可以選擇父元素裡面的子元素。
寫法:外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代。
1、中間使用空格隔開
2、前面是父級,後面是子級,最終選擇是後面的子級
3、前後可以是任意基礎選擇器
子元素選擇器(子選擇器)只能作為某元素的最近一級子元素。簡單理解就是選親兒子元素。
語法:元素1>元素2(樣式宣告)
1、元素1和元素2中間用》隔開
2、元素1是父級,元素2是子級,最終選擇的是元素2
3、元素2必須是親兒子,其他不歸他管。
並集選擇器可以選擇多組標籤,同時為他們定義相同的樣式。通常用於集體宣告。
並選擇器是各種選擇器通過英文逗號(,)連線而成,任何形式的選擇器都可以做為並集選擇器的一部分。
語法:元素1,元素2(樣式宣告)
1、元素1和元素2中間用逗號隔開
2、逗號可以理解為和的意思
3、並集選擇器通常用於集體宣告
鏈結偽類選擇器
1、為了確保生效,請按照lvha的循序宣告:link、visited、hover、active
2、因為a鏈結在瀏覽器中具有預設樣式,所以我們實際工作中都需要給鏈結單獨指定樣式
鏈結偽類選擇器在實際開發中的寫法:
:focus偽類選擇器
:focus偽類選擇器用於獲取焦點的表單元素
焦點就是游標,一般情況< input>類表單元素才能獲取,因此這個選擇器主要針對與表單元素來說。
(ps:引自pink老師~,剛剛開始作為自己的學習筆記寫,如有不好請見諒,阿里嘎多)
[^1]:
CSS基礎知識 選擇器
選擇器分組 通配選擇器 類選擇器 應用樣式而不考慮具體涉及的元素 只需要在元素中設定class屬性。例如 header 多類選擇器 header info id選擇器 根據元素的id設定樣式屬性值 例如 divid2 屬性選擇器 根據元素的屬性值,來選擇元素 例如 a href title 根據具體...
CSS基礎 復合選擇器
在css中,可以根據選擇器的型別把選擇器分為基礎選擇器和復合選擇器,復合選擇器是建立在基礎選擇器之上,對基本選擇器進行組合形成的 復合選擇器可以更準確 更高效的選擇目標元素 標籤 復合選擇器是由兩個或者多個基礎選擇器,通過不同的方式組合而成 常用的復合選擇器包括 後代選擇器又稱為包含選擇器,可以選擇...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...