1. 標簽名選擇器 div { color：Red;} 即頁面中的各個標簽名的css樣式 2.類選擇器 .divClass {color:Red;} 即定義的每個標簽的class 中的css樣式 3.ID選擇器 #myDiv {color:Red;} 即頁面中的標簽的id 4.后代選擇器（類選擇器的后代選擇器） .divClass span { color:Red;} 即多個選擇器以逗號的格式分隔 命名找到準確的標簽 5.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標簽分組顯示

css選擇器優先級怎么比較

CSS選擇器中比較常見的有標簽選擇器、ID選擇器、類選擇器以及子選擇器。而事實上，CSS選擇器如果細分下來，竟然多達40多種。那他們的優先級該怎么比較呢，下面就來看看吧。

● 不同級別

1. 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。

2. 作為style屬性寫在元素內的樣式

3. id選擇器

4. 類選擇器

5. 元素選擇器

6. 通配符選擇器

7. 瀏覽器自定義或繼承

總結排序：!important > 行內樣式 > ID選擇器 > 類選擇器 > 元素 > 通配符 > 繼承 > 瀏覽器默認屬性

● 同一級別

(1) 同一級別中后寫的會覆蓋先寫的樣式

(2) 同一級別css引入方式不同，優先級不同

總結排序：內聯(行內)樣式 > 內部樣式表 > 外部樣式表 > 導入樣式(@import)。

對于選擇器優先級，還可以通過計算權重值來比較

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

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

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

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

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

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

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

作用：選擇更準確更精細的目標元素并為其設置屬性

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

!注意選擇器之間不能有空格，要緊挨在一起

6、通配選擇器

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

語法：*{ }

7、后代元素選擇器

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

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

8、子元素選擇器

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

語法：父元素>子元素

9、偽類選擇器

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

:hover 移入時元素的狀態

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

:active 被點擊時元素的狀態

10、 屬性選擇器

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

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

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

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

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

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

11、兄弟元素選擇器

+選擇器

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

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

~選擇器

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

語法：前一個~后邊所有

選擇器body>div 只操作body下級的div。div1+div2 只選擇div1 同級 隨后 相鄰最近的div2div1~p 選擇div1下所有的p屬性選擇器[attr]{} 例：[class]{color:red;} [class="text"]{color:red;}[class|="nav"]{color:red;} 選擇所有class屬性，并且屬性值唯一為nav-開頭的元素[class~="nav"]{color:red;} 選擇所有class屬性，并且包含單個完整的nav屬性值的元素[class1][class="text"]{color:red;}選擇具有class1屬性，并且具有class屬性且屬性值唯一為text的元素