css中選擇符

2021-08-27 00:02:24 字數 1957 閱讀 6771

1、基本選擇器:

1. *——萬用字元(不建議使用)

2. e——標籤(元素),也是我們之前型別選擇器

3. . + class名——類選擇器

4. # + id名——id選擇器

5. 選擇器1,選擇11器2 —— 群組選擇器

2、關係(層級)選擇器

1.e f 包含選擇器 —— e父元素,f後代元素,滿足f是e的後代,而且一定要f元素

2.e>f 滿足f是e子代元素(不包括子代的子代元素),e父元素,f是子元素

3.e+f 表示獲取到e下乙個兄弟元素(f是e的相鄰元素),e下乙個元素必須是f,f必須為e的相鄰元素

4.e~f 表示獲取到e後面的所有f兄弟元素

3、動態偽類選擇器

1.e:hover —— 給e新增滑鼠滑過的樣式

2.e: link —— 鏈結並未被訪問的時候的樣式(訪問之前的)

4.e:active —— 滑鼠按下,並未跳轉的時候樣式

5.input:focus —— input 獲取焦點時候的樣式

4、目標偽類

1.e:target —— e目標元素,給目標元素新增樣式

5、語言偽類選擇器

1.q:lang(no){

qoutes:"符號" "符號"

注意點:要配合,預設符號是雙引號

6、狀態偽類選擇器

1.e:enabled —— 給可輸入的標籤新增樣式

2.e:disabled —— 給禁用的標籤新增樣式

3.e:checked —— e被選中的時候新增樣式

4.e::selection —— 被選中的樣式

7、結構偽類選擇器:

1.e f:first-child 代表找到下面f(f要為e的第乙個元素),

所有子元素中得第乙個,並且要滿足為f元素

2.e f:lat-child 代表找到下面f(f要為e的最後乙個元素),

所有子元素中的最後乙個,並且要滿足為f元素

3.e f:nth-child(n) 代表找e下面的第n 元素,並且這個元素要為f

備註:這個n取1之後才會有效果

4.e f:nth-child(2n) 代表找到e下面的子元素為偶數的f元素

5.e f:nth-child(2n-1) 代表找到e下面的子元素奇數的f元素

6.e f:nth-of-type(n) 代表找到e下面指定的f元素的第n個

7.e f:last-of-type 代表找到e下面指定的f元素的最後乙個

8.e f:first-of-type 代表找到e下面指定的f元素的第乙個元素

9.e f:only-child 代表e下面有且只有乙個子元素,並且這個子元素

10.e f:only-of-type 代表e下面同型別的元素只有乙個,並且這個元素為f,其他型別的元素可以有多個

11.e f:empty 代表找到e下面子元素內容為空,並且這個子元素為f

注意點:f資源內容不能有空格,有空格相當於字元。

8、否定偽類選擇器:

1.e:not(f) 代表找到e中 除了 f以為所有e元素

9、屬性選擇器:

1.e[attr] 代表找到e元素中擁有attr 這個屬性的元素

2.e[attr=val] 代表找到e元素中擁有attr屬性 且屬性值等於 val

3.e[attr^=val] 代表找到e元素中擁有attr屬性 且以val值開頭的元素

4.e[attr$=val] 代表找到e元素中擁有attr屬性 且以val值結尾的元素

5.e[attr*=val] 代表找到e元素中擁有attr屬性 且val值 (任意位置都可以)

10、偽元素選擇器:

1.e::after 表示在e下面新增乙個最後的子元素

2.e::before 表示在e下面新增第乙個的子元素

3.e::first-letter 表示改變e元素中第乙個字元 樣式

4.e::first-line 表示改變e元素中第一行字元樣式

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...

CSS 選擇符大全(常用css選擇符)

e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...