CSS入門基礎知識(六) 復合選擇器

2021-10-24 05:24:58 字數 1862 閱讀 8345

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 分組選擇器 選擇...