偽元素選擇器 屬性選擇器 兄弟元素選擇器

2021-10-05 02:12:51 字數 1309 閱讀 6787

一、偽元素:

使用偽元素來表示元素中的一些特殊位置

常用:1、:first-letter 為元素中的第乙個位置設定樣式

2、:first-line 為元素中的第一行位置設定樣式

3、:before 為元素最前邊的部分設定樣式(一般before都需要結合屬性content樣式一起使用

通過content可以向before或after位置新增一些內容)

語法:p:before

4、:after 最後邊部分設定樣式

語法:p:after

二、屬性選擇器

1、title屬性:1、這個屬性可以給任何標籤指定

當滑鼠移入到元素上時元素中title屬性的值將會作為提示文字顯示

我是乙個段落

2、為所有具有title屬性的元素設定樣式:
2、常用屬性選擇器的語法: [屬性名] 選取含有指定屬性的元素

[屬性名=「值」] 選取含有指定屬性值的元素

[屬性名^=「屬性值」] 選取這個值以指定值開頭的元素

例如:p[title^=「abc」] 選取以abc開頭的title元素

[屬性名$=「屬性值」]選取這個值以指定屬性值結尾的元素

[屬性名*=「屬性值」]選取屬性值以包含指定內容的元素

三、其他子元素選擇器

1、:first-child 選擇第乙個子標籤

2、:last-child 選中最後乙個子標籤

3、:nth-child(引數) 選中指定位置的子元素,該選擇器後邊可以指定乙個引數,

指定要選中第幾個元素,引數even表示偶數字置改變樣式,引數odd表示奇數字置改變樣式

(例如:選中p中的第三個元素

p:nth-child(3){} )

偶數變化:p:nth-child(even){}

奇數變化:p:nth-child(odd){}

4、:first-of-type 選擇指定型別的子元素()

:last-of-type 選擇指定型別的子元素

:nth-of-type 選擇指定型別的子元素

四、兄弟元素選擇器

1、後乙個兄弟元素選擇器:

作用:可以選中乙個元素後緊挨著的指定的兄弟元素

語法:前乙個+後乙個(要緊挨著的後乙個,中間不能隔開)

例如:span + p {}

2、選中後邊的所有兄弟元素

語法:前乙個 ~ 後乙個{}

屬性選擇器 子元素的偽類 兄弟元素選擇器

charset utf 8 title 屬性選擇器 作用 可以根據元素中的屬性值來選取指定元素 語法 屬性名 選取含有指定屬性的元素 例 p title 語法 屬性名 屬性值 選取含有指定屬性的元素 p title hello 語法 屬性名 屬性值 選取以指定內容開頭的元素 p title a 語法...

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...

屬性選擇器,子元素選擇器,偽元素選擇器筆記

屬性選擇器 屬性名稱 屬性名稱 屬性值 子元素選擇器 第n個子元素 元素 nth child 1 最後乙個子元素 元素 last child 全部子元素 test test2 直接子元素 test test2 選擇後面的乙個元素 test div 選擇後面的多個元素 test div偽元素 通過cs...