CSS選擇器有哪幾種？舉例輕鬆理解CSS選擇器

CSS選擇器彙總（清爽版）

一、元素選擇器 標籤名{ }

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

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

 

 

四、選擇器分組（並集選擇器）

做用：經過它能夠同時選中多個選擇器對應的元素（一般用於集體聲明）

語法：選擇器1，選擇器2，選擇器n{ }

 

五、複合選擇器（交集選擇器）

做用：選擇更準確更精細的目標元素併爲其設置屬性

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

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

 

 

六、通配選擇器

做用：用來選中頁面中全部的元素

語法：*{ }

 

 

七、後代元素選擇器

做用：選中指定元素的指定後代元素

語法：祖先元素 後代元素{ }

 

 

八、子元素選擇器

做用：選中指定父元素的子元素

語法：父元素>子元素

 

 

九、僞類選擇器

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

:hover 　　移入時元素的狀態

:visited　　已被訪問事後的元素的狀態

:active　　被點擊時元素的狀態

 

十、 屬性選擇器

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

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

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

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

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

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

 

 

十一、兄弟元素選擇器

+選擇器

做用：選中一個元素後緊挨着的指定的兄弟元素

語法：前一個+後一個（做用在後一個）

~選擇器

做用：選中後邊全部的制定兄弟元素

語法：前一個~後邊全部