CSS3複雜選擇器

2022-09-02 12:30:13 字數 1765 閱讀 3584

1.相鄰兄弟選擇器

p+b : 同乙個父元素下p標籤後面的第乙個兄弟元素b;

2.通用兄弟選擇器

p~b : 同乙個父元素下p標籤後面的所有兄弟元素b;

3.屬性選擇器

將元素屬性用於選擇器中,從而獲取指定元素屬性或者值得元素;

語法:[屬性] : 匹配 "指定屬性" 的 "所有" 元素;

元素[屬性] : 匹配 "指定屬性" 的 "指定" 元素;

input[type] : 獲取具備type屬性的input;

input[id]   : 獲取具備id屬性的input;

元素[屬性][屬性] :匹配 "多個指定屬性" 的 "指定" 元素;

元素[屬性="值"] :匹配 "指定屬性等於值" 的 "指定" 元素;

元素[屬性~="值"] : 匹配 "指定屬性中包含這個值(獨立的單詞)" 的 "指定" 元素;

元素[屬性^="值"] : 匹配 "指定屬性以指定值開始" 的 "指定" 元素;

元素[屬性*="值"] : 匹配 "指定屬性包含值(可以是非獨立的單詞)" 的 "指定" 元素;

元素[屬性$="值"] : 匹配 "指定屬性以指定值結束" 的 "指定" 元素;

元素[屬性!="值"] : 匹配 "指定屬性不等於值" 的 "指定" 元素;

4.目標偽類

活動的html錨點,用於選取當前活動的目標元素;

語法::target 匹配所有活動錨點

元素:target 匹配指定元素活動錨點

5.元素狀態偽類

主要匹配元素的禁用,啟用,選中狀態

多數用在表單元素上;

:disabled  匹配所有被禁用的元素

:enabled  匹配所有被啟用的元素

:checked  匹配所有被選中的元素  用於單選和複選;

6.結構偽類

從元素結構(層級結構)上進行劃分;

用於:找 第乙個子元素,最後乙個子元素,沒有子元素,僅僅包含乙個子元素

:first-child      匹配父元素的第乙個子元素

:last-child       匹配父元素的最後乙個子元素

:empty           匹配沒有子元素的元素

:only-child      匹配只有乙個子元素的元素

ul > li:nth-child(2n+1) //用來選取ul中的第2n+1(奇數)個li元素

e:nth-of-type()只計算父元素中指定的某種型別的子元素,當某個元素的子元素型別不只是一種時,使用nth-of-type來選擇會比較有用。

e:nth-last-of-type()的用法同e:nth-of-type()相同,不同的是:nth-last-of-type()也是從父元素的最後乙個子元素開始算起。

li:nth-of-type(3)的話就會標識它只會選擇第三個li元素,別的元素會忽略掉

7.否定偽類

input:not([type="text"])

input:not(:last-child)

8.偽元素選擇器

:first-letter 選取指定選擇器的首字元;

p:first-letter

一幫用於排版,首字元突出等;

:first-line 選取指定選擇器的首行字元;

::selection 匹配使用者的選取部分;

如 選中的文字等

::selection //這樣改寫後我們選中的文字背景顏色和文字顏色就可以自定義了,但是需要注意的是,::selection僅接受兩個屬性,乙個是background,乙個是color。

css3複雜選擇器

今天antd 設定樣式 被教育了一番,上來第一感覺這樣式咋搞啊,一臉懵逼,還是css 掌握不牢固,今天記下css3複雜選擇器。1.相鄰兄弟選擇器 p b 同乙個父元素下p標籤後面的第乙個兄弟元素b 2.通用兄弟選擇器 p b 同乙個父元素下p標籤後面的所有兄弟元素b 3.屬性選擇器 將元素屬性用於選...

css3 選擇器 CSS3選擇器

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

css3 選擇器 CSS3選擇器詳解

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