逆戰班 css常用選擇器

2021-10-03 09:20:00 字數 2350 閱讀 2513

一、基本選擇符:

1.萬用字元:選擇頁面中所有的標籤。

作用:清除內填充和外邊距。

css中語法:✳

2.標籤選擇符:所有的html標籤,都能當作型別選擇來用。

特點:選擇頁面中所有的當前元素。

作用:統一某個標籤樣式方式的時候,清除某個標籤樣式的時候。

3.id選擇符:給標籤新增乙個id。id=「名稱」

css中id語法:#名稱

特點:id是惟一性的,在同乙個頁面中,只能出現一次。

作用:id名稱用作網頁外圍結構的搭建。

4.class選擇符:給標籤新增class名稱。class=「名稱」。

css中class語法:.名稱。

特點:乙個標籤可以擁有多個class名稱,class可以重複使用。

作用:更適合定義一類樣式。

5.父子選擇器:找到符合要求的標籤,會匹配所有的後代標籤。

css中語法:父元素選擇器 子元素選擇符。例:ul li

6.群組選擇器:可以將多種選擇器結合到一起使用,用來統一設定樣式。

css中語法:選擇符1,選擇符2,選擇符3。例:h1,h2,#abc,.m.

**和效果圖如下:

二、屬性選擇器:

1: 選擇符[屬性名] 只要帶有當前屬性名就會被選中。

2: 選擇符[屬性名=「屬性值」] 不僅制定屬性名,有指定屬性值

3: 選擇符[屬性名~=「屬性值」] 屬性值為乙個詞列表,只要包含當前詞就會被選中

4: 選擇符[屬性名^=「屬性值」] 屬性值必須是當前指定的屬性值開頭的

5:選擇符[屬性名$=「屬性值」] 屬性值必須是當前指定的屬性值結尾的

6: 選擇符[屬性名*=「屬性值」] 屬性值中只要包含了指定的字元就會被選中

7: 選擇符[屬性名|=「屬性值」] 屬性值僅是當前指定的屬性值,或者是以屬性值- 開頭 ( left-up )

**和效果圖如下:

三、偽類選擇器:

如果子集標籤型別一致(類名一致)的情況下:採用的是 child

1 : 選擇符:first-child

2 : 選擇符:last-child

3 : 選擇符:nth-child(val){}

val :

可以是某個數值 表示第幾個

2n 或者 even 偶數

2n + 1 或者 odd 奇數

4 : 選擇符:nth-last-child(){} 倒數第幾個

5 : 選擇符:only-child{} 當前子集只有乙個元素的時候才會被選擇。

如果子集合標籤型別不一致(類名不一致)的情況下:採用的是 of-type

of-type 先確定型別,把不同型別的先剔除。剩下同類的進行第幾個選擇。

1 : 選擇符:first-of-type

2 : 選擇符:last-of-type

3 : 選擇符:nth-of-type(val){}

val :

可以是某個數值 表示第幾個

2n 或者 even 偶數

2n + 1 或者 odd 奇數

4 : 選擇符:nth-last-of-type(){} 倒數第幾個

5 : 選擇符:only-of-type{} 當前子集只有乙個元素的時候才會被選擇

**和效果圖如下:

四、層級選擇器(包含選擇器):

父元素》子元素{}

說明:只能選擇父元素的最近的一層子元素。

兄弟元素 + 兄弟元素{}

說明:通過當前的元素 選擇符 離她最近的 下面的兄弟元素

兄弟元素 ~ 兄弟元素{}

說明:通過當前的元素 選擇符 下面的所有的兄弟元素

CSS常用選擇器

class 選擇器 選擇並設定 class intro 的元素的樣式 intro id選擇器 為 id firstname 的元素設定樣式 firstname 標籤選擇器 選擇並設定所有 元素的樣式 p並集選擇器 使用 逗號 連線兩個選擇器 選擇並設定所有 樣式和所有 元素的樣式 h1,p 後代選擇...

CSS 常用選擇器

選擇器是指通過一定的語法規則選取到對應的html標記,然後給這個對應的html標記設定樣式 1.標籤選擇器 寫法 標籤名 標籤選擇器影響範圍大,一般用來做一些通用設定,或用在層級選擇器中。舉例 div 這是第乙個div 這是第二個div 2.類選擇器 寫法 類名 通過類名來選擇元素,乙個類可應用於多...

css常用選擇器

css 層疊樣式表 作用 美化html 行內式 css選擇器 外鏈式為單獨書寫的乙個css檔案,內容類似內嵌式,但是沒有內嵌式的外部標籤 如下 標籤選擇器 p color darkseagreen font family 楷體 font weight 200 id選擇器 id color india...