CSS3選擇器詳解

2022-02-14 23:29:38 字數 1736 閱讀 4017

本文最初發表於,並在github上持續更新前端的系列文章。歡迎在github上關注我,一起入門和高階前端。

以下是正文。

css3在css2基礎上,增強新增了許多特性, 彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。

比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的;在高版本的瀏覽器中,頭像是圓的。

漸進增強和優雅降級之間的不同(面試題目)

由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾,瀏覽器的建議版本為:

在檢視css參考手冊時,需要注意以下符號:

比如說,表示可以設定一至四個引數。

下面講css3的基礎知識。本文講一下 css3 選擇器的內容。

我們之前學過 css 的選擇器,比如:

div{} 標籤選擇器

.box 類名選擇器

#box id選擇器

div p 後代選擇器

div.box 交集選擇器

div,p,span 並集選擇器

div>p 子代

* : 萬用字元

div+p: 選中div後面相鄰的第乙個p

div~p: 選中的div後面所有的p

css3新增了許多靈活查詢元素的方法,極大的提高了查詢元素的效率和精準度。css3選擇器與 jquery 中所提供的絕大部分選擇器相容。

屬性選擇器的標誌性符號是

匹配含義:

^:開頭  $:結尾  *:包含
格式:

比如說,我們用屬性選擇器去匹配標籤的classname,是非常方便的。

這裡我們用class屬性來舉例。**舉例:

生命壹號

效果如下:

上圖可以看出

2、格式:(第二部分)

e::first-letter的舉例:

e::first-line的舉例:

最後來張**:

想學習**之外的軟技能掃一掃,你將發現另乙個全新的世界,而這將是一場美麗的意外:

css3 選擇器 CSS3選擇器詳解

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

CSS3選擇器詳解

本文最初發表於,並在github上持續更新前端的系列文章。歡迎在github上關注我,一起入門和高階前端。以下是正文。css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏...

css3 選擇器 CSS3選擇器

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