CSS3選擇器備忘錄

2021-08-14 18:59:16 字數 1204 閱讀 6435



除了id選擇器和class選擇器,另還有元素選擇器、屬性選擇器、包含選擇器、子選擇器和css3中新增的兄弟選擇器,以下帶上id選擇器和類選擇器一起舉例。

1.id 選擇器(id selector,is):使用 # 標識selector,語法格式:#s(s為選擇器名)。例:id為name的標籤會匹配下面的樣式

red text

2.類選擇器(class selector,cs):使用 . 標識selector,語法格式:.s(s為選擇器名)。例:class屬性值為value的標籤會匹配下面的樣式

center text

3.元素選擇器(element selector,es):又叫標籤選擇器,使用標籤名作為selector名,語法格式:s(s為選擇器名)。例:所有的p標籤都會匹配以下的樣式

italic text

4.屬性選擇器(attribute selector,as):es其實是as的乙個特例,在as基礎上還能對selector描述得更具體,語法格式為 e[attr[~=][|=][^=][$=][*=]value],是並沒有得到所有瀏覽器支援的選擇器,因此不舉例

5.包含選擇器(package selector,ps):指定目標選擇器必須處在某個選擇器對應的元素內部,語法格式:a b(a、b為html元素/標籤,表示對處於a中的b標籤有效)。例:以下div內的p標籤和div外的p標籤分別匹配不同的樣式

red text

yellow text

6.子選擇器(sub-selector,ss):類似於ps,指定目標選擇器必須處在某個選擇器對應的元素內部,兩者區別在於ps允許"子標籤"甚至"孫子標籤"及巢狀更深的標籤匹配相應的樣式,而ss強制指定目標選擇器作為 包含選擇器對應的標籤 內部的標籤,語法格式:a>b(a、b為html元素/標籤)。例:以下div內的p標籤匹配樣式,div內的table內的p不匹配

red text

no red text;

7.兄弟選擇器(brother selector,bs):bs是css3.0新增的乙個選擇器,語法格式:a~b(a、b為html元素/標籤,表示a標籤匹配selector的a,b標籤匹配selector的b時,b標籤匹配樣式)

no red text

no red text

red text

前端備忘錄 JQuery選擇器

基本選擇器是最常用的選擇器,也是最簡單的選擇器.test 選取id為test的元素 test 選取class為test的元素 div.test 選取class為test的div元素 div 選取所有的div元素 選取所有元素 div,p 選取所有div元素和p元素 一般使用基本選擇器就可以完成大部分...

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...