css3 選擇器 CSS3選擇器

2021-10-13 18:19:21 字數 1686 閱讀 9328

子級選擇器用於選取帶有特定父元素的元素。

書寫語法:element1 > element2

注意:如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。

> 符號之前書寫父級的選擇器,> 符號之後寫子級選擇器,必須滿足父子級關係才選中標籤

相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後的兄弟元素,而且二者有相同的父元素。

書寫語法: e1 + e2。

注意:a)選中的是緊跟在 e1 之後的同級元素 e2。

b)只能選中緊跟在後面的乙個 e2 元素。

c) 二者有相同的父元素。

d)+ 符號前後可以新增空格書寫。

段落234 文字都為紅色

其他兄弟選擇器匹配同乙個父元素中在 element1 後面的所有 element2 元素。

書寫語法:element1~element2

注意:a)選擇 element1 之後出現的所有 element2。

b)兩種元素必須擁有相同的父元素,但是 element2 不必直接緊隨 element1。

c)~ 符號前後可以新增空格書寫。

n 可以是數字,關鍵字和公式

n 如果是數字,就是選擇第 n 個

常見的公式如下 ( 如果 n 是公式,則從 0 開始計算,n是從 0 ,1,2,3.. 一直遞增)

但是第0 元素或者超出了元素的個數會被忽略

e:nth-child(n) 匹配父元素的第 n 個子元素 e,同時需要滿足兩個條件。

e:nth-of-type(n) 匹配同型別中的第 n 個同級兄弟元素 e,會忽視其他同級的非同型別元素。

單冒號 e:before 雙冒號 e::before 瀏覽器對寫法都能識別,雙冒號是 h5 的語法規範。

偽元素只能給雙標籤新增,不能給單標籤新增

偽元素的冒號前不能有空格,如 e ::before 這個寫法是錯誤的

偽元素裡面必須寫上屬性 content:"";

before 和 after 建立乙個元素,但是屬於行內元素。

因為在 dom 裡面看不見剛才建立的元素,所以我們稱為偽元素。

注: e::first-letter; e::first-line; 是建立了乙個偽元素,而不是偽類; 如果是偽類的話,就是全部選擇的狀態了;

屬性選擇器用來選擇包含指定屬性的標籤。

基礎選擇器:id 選擇器 > 類選擇器 > 標籤選擇器 > *

偽類選擇器、屬性選擇器的權重等於 類選擇器 。

偽元素選擇器的權重等於 標籤選擇器 。

css3 選擇器 CSS3選擇器詳解

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

CSS3選擇器 屬性選擇器

指定屬性名,但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名,並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名,具...

CSS3 選擇器 屬性選擇器

屬性選擇器早在css2中就被引入了,其主要作用就是對帶有指定屬性的html 元素設定樣式。使用css3屬性選擇器,你可以只指定元素的某個屬性,或者你還可以同時指定元素的某個屬性和其對應的屬性值。選擇有某個屬性的元素,而不管這個屬性的值是什麼。選擇有某個屬性的元素,並且要求這個元素的屬性的屬性值只能為...