來自css3選擇器的二三事

2021-10-03 08:21:35 字數 3744 閱讀 5337

css3選擇器：選擇的是html標籤。其中css3選擇器分為三大類：屬性選擇器、偽類選擇器、層級選擇器，接下來我們將一一介紹他們的用法。

通過html的屬性對html的標籤進行選擇

1、選擇符[屬性名]：只要帶有當前屬性名就會被選中。

文字文字文字


文字文字文字


文字文字文字
2、選擇符[屬性名=「屬性值」]： 不僅指定屬性名，並且指定該屬性的屬性值

文字文字文字


文字文字文字


文字文字文字
3、選擇符[屬性名~=「屬性值」]：屬性值為乙個詞列表，並且以空格隔開，只要包含當前詞就會被選中

文字文字文字


文字文字文字


文字文字文字
4、選擇符[屬性名^=「屬性值」]： 屬性值必須是當前指定的屬性值開頭的

文字文字文字


文字文字文字


文字文字文字
5、選擇符[屬性名$=「屬性值」]：屬性值必須是當前指定的屬性值結尾的（與4類似）

6、選擇符[屬性名*=「屬性值」] ：屬性值中只要包含了指定的字元就會被選中

文字文字文字


文字文字文字


文字文字文字
7、選擇符[屬性名|=「屬性值」]：屬性值僅是當前指定的屬性值，或者是以屬性值- 開頭 （ left-con ）

文字文字文字


文字文字文字


文字文字文字
選擇誰，選擇符就寫誰。

其中偽類選擇器又分為：結構性偽類選擇器、目標偽類選擇器、ui元素狀態偽類選擇器、動態偽類選擇器

1、結構性偽類選擇器

a、 child：不分析型別，直接進行選擇。如果子集標籤型別一致（類名一致）的情況下，建議使用：child

（1）選擇符:first-child： 匹配所在子集的第乙個元素
（2）選擇符:last-child：匹配所在子集的最後乙個元素

（3）選擇符:nth-child(n)：用於匹配索引值為n的子元素，索引值從1開始。

其中n為某個數值，表示第幾個；

2n 或者 even，表示偶數；

2n + 1 或者 odd，表示奇數。
（4）選擇符:nth-last-child()：表示倒數第幾個（從最後乙個開始算索引） 與（3）相反

（5）選擇符:only-child：當前父元素下子元素只有乙個的時候才會被選擇
b、of-type：先確定型別，把不同型別的先剔除，剩下同類的進行第幾個選擇。如果子集合標籤型別不一致（類名不一致）的情況下，建議使用：of-type

用法與a類一樣

（1）選擇符:first-of-type匹配同型別元素中的第乙個選擇符
（2）選擇符:last-of-type（3）選擇符:nth-of-type(val)（4）選擇符:nth-last-of-type()（5）選擇符:only-of-type

c、拓展

（1）:root選擇的是根元素 html

（2）選擇符:empty在當前元素沒有任何內容或者沒有任何子元素的時候會被選中

2、目標偽類選擇器

當元素被相關鏈結（錨點）指向的時候，發生css樣式的改變（與對應的目標進行繫結）

選擇符:target

連線div1


連線div212
3、ui元素狀態偽類選擇器

主要是針對於html中的form元素操作。

（1）e：enabled: 設定該元素處於可用狀態時的樣式

（2）e:disabled：設定該元素處於不可用狀態時的樣式
（3）e:checked：指定當form表單的單選、多選按鈕處於選中狀態時的樣式
input:checked（當input被選中時執行樣式）， lable用作提示資訊。當選中核取方塊， 使用層級選擇器，選中input下離他最近的兄弟元素lable改變其背景顏色。

（4）e::selection：匹配e元素中被使用者選中或處於高亮狀態的部分（只能改變選中部分的背景和顏色）

注：e後面為兩個冒號

文字文字文字文字文字文字


4、動態偽類選擇器


（1）e:link：鏈結偽類選擇器，顯示未訪問的鏈結狀態


（2）e:visited：鏈結偽類選擇器，顯示已訪問的鏈結狀態


（3）e:active：使用者行為選擇器，顯示滑鼠按下去時的狀態


（4）e:hover：使用者行為選擇器，顯示滑鼠滑過的鏈結狀態（a:hover）


（5）e:focus：使用者行為選擇器，顯示獲取焦點時的狀態




1、子選擇器 ：父元素》子元素只選擇父元素最近的一層子元素，巢狀兩個子元素則兩個子元素都會選擇，子元素裡包含的子元素不會被選擇




2、相鄰兄弟選擇器 ：兄弟元素+兄弟元素選擇當前的元素選擇符下離他最近的兄弟元素


pppppppp


pppppppp


3、通用選擇器 ：兄弟元素~兄弟元素選擇當前元素選擇符下的所有兄弟元素


pppppppp


pppppppp


css3選擇器讓我們在編寫**時變得更加靈活，更加輕鬆簡單，我們要熟悉它的用法並靈活的應用。
				
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

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

				
CSS3的選擇器
漸進增強 從小到大 先保證最基本的功能 使用者體驗的提公升 優雅降級 從大到小 先針對版本較高的裝置進行專案構建,保證使用者體驗的完美 犧牲一些效果,保證最基本的功能 選擇器 選擇符 id class 型別 div span.後代選擇器 偽類選擇器 偽元素選擇器.屬性選擇器 e attr 選中e元素...