CSS選擇器複習

2022-02-25 11:32:56 字數 1876 閱讀 1794

通用選擇器:* 選擇到所有的元素 

選擇子元素:> 選擇到元素的直接後代(第一級子元素) 

相鄰兄弟選擇器:+ 選擇到緊隨目標元素後的第乙個元素 

普通兄弟選擇器:~ 選擇到緊隨其後的所有兄弟元素 

偽類選擇器: 

:before, :after在元素內容前面、後面新增內容(相當於行內元素) 

css3結構選擇器 

:nth-child 選擇指定索引處的子元素 

nth-child(n) 父元素下的第n個子元素 

nth-child(odd) 奇數子元素(同nth-child(2n-1)) 

nth-child(even) 偶數子元素(同nth-child(2n)) 

nth-child(an+b) 公式 

*(nth-child從1開始) 

:nth-last-child(n) 倒數第n個子元素 

:nth-of-type(n) 父元素下的第n個指定型別的子元素 

:nth-last-of-type 父元素下的倒數第n個指定型別的子元素 

:first-child 選擇父元素下的第乙個子元素 

:last-child 選擇父元素下的最後乙個子元素 

:only-child 選擇父元素下唯一的子元素 

:only-of-type 選擇父元素下指定型別的唯一子元素 

:root 選擇文件的根目錄,返回html 

div :only-child注意空格(選中div下唯一的子元素)

偽類選擇器

:link指向未被訪問頁面的鏈結設定樣式 

:visited設定指向已訪問頁面的鏈結的樣式 

:hover滑鼠懸停時觸發 

:active在點選時觸發 

:enabled 選擇啟用狀態元素 

:disabled 選擇禁用狀態元素 

:checked 選擇被選中的input元素(單選按鈕或核取方塊) 

:default 選擇預設元素 

:valid、invalid 根據輸入驗證選擇有效或無效的input元素 

:in-range、out-of-range 選擇指定範圍之內或者之外受限的元素 

:repuired、optional 根據是否允許:required屬性選擇input元素 

利用label修改radio的樣式:如下:

屬性選擇器 

e[attr] 屬性名,不確定具體屬性值 

e[attr=」value」] 指定屬性名,並指定其對應屬性值 

e[attr ~=」value」] 指定屬性名,找到的是具有此屬性名,且與其它屬性名之間用空格隔開,如下: 

e[attr ^= 「value」] 指定屬性名,屬性值以value開頭 

e[attr $=」value」] 指定屬性名,屬性值以value結束 

e[attr *=」value」] 指定了屬性名,屬性值中包含了value 

e[attr |= 「value」] 指定屬性名,屬性值以value-開頭或者值為value 

CSS複習1 選擇器

css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。每條宣告由乙個屬性和乙個值組成。屬性 property 是您希望設定的樣式屬性 style attribute 每個屬性有乙個值。屬性和值被冒號分開。你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇...

CSS3 選擇器 屬性選擇器(複習)

e attr 只使用屬性名,但沒有確定任何屬性值 demo a id demo a href title e attr value 指定屬性名,並指定了該屬性的屬性值 demo a id first demo a href title 對於e attr value 這種屬性值選擇器有一點需要注意 屬...

前端 css選擇器的複習

doctype html html lang en head meta charset utf 8 title 三種匯入css的方式 title style body style link rel stylesheet href 選擇器的複習.css head body p style color ...