CSS選擇器有哪幾種?舉例輕松理解CSS選擇器


CSS選擇器匯總(清爽版)

1、元素選擇器 標簽名{ }

2、id選擇器 #id屬性值{ }

3、類選擇器 ·class屬性值{ }

 

 

4、選擇器分組(並集選擇器)

作用:通過它可以同時選中多個選擇器對應的元素(通常用於集體聲明)

語法:選擇器1,選擇器2,選擇器n{ }

 

5、復合選擇器(交集選擇器)

作用:選擇更准確更精細的目標元素並為其設置屬性

語法:選擇器1選擇器2選擇器n{ }

<!--注意選擇器之間不能有空格,要緊挨在一起-->

 

 

6、通配選擇器

作用:用來選中頁面中所有的元素

語法:*{ }

 

 

7、后代元素選擇器

作用:選中指定元素的指定后代元素

語法:祖先元素 后代元素{ }

 

 

8、子元素選擇器

作用:選中指定父元素的子元素

語法:父元素>子元素

 

 

9、偽類選擇器

偽類表示元素的一種特殊狀態

:hover   移入時元素的狀態

:visited  已被訪問過后的元素的狀態

:active  被點擊時元素的狀態

 

10、 屬性選擇器

作用:根據元素中的屬性或屬性值來選取指定元素

語法:[屬性名]選取含有指定屬性的元素

​ [屬性名=“屬性值”]選取含指定屬性值的元素

​ [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素

​ [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素

​ [屬性名*="屬性值"] 選取屬性值包含指定內容的元素

 

 

11、兄弟元素選擇器

+選擇器

作用:選中一個元素后緊挨着的指定的兄弟元素

語法:前一個+后一個(作用在后一個)

~選擇器

作用:選中后邊所有的制定兄弟元素

語法:前一個~后邊所有

 

 

 

 

轉發 https://www.cnblogs.com/isremya/p/12364741.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM