標籤選擇器 (tagname)
body
.class
#id
在css3中,星號(*)可以和命名空間組合使用:屬性選擇器 ()ns| * - 會匹配ns命名空間下的所有元素
* | * - 會匹配所有命名空間下的所有元素
| * - 會匹配所有沒有命名空間的元素
屬性選擇器通過已經存在的屬性名或屬性值匹配元素
語法:[attr]表示帶有以 attr 命名的屬性的元素。[attr=value]
表示帶有以 attr 命名的屬性，且屬性值為 value 的元素。
[attr~=value]
表示帶有以 attr 命名的屬性的元素，並且該屬性是乙個以空格作為分隔的值列表，其中至少有乙個值為 value。
[attr|=value]
表示帶有以 attr 命名的屬性的元素，屬性值為「value」或是以「value-」為字首（"-"為連字元，unicode 編碼為 u+002d）開頭。典型的應用場景是用來匹配語言簡寫**（如 zh-cn，zh-tw 可以用 zh 作為 value）。
[attr^=value]
表示帶有以 attr 命名的屬性，且屬性值是以 value 開頭的元素。
[attr$=value]
表示帶有以 attr 命名的屬性，且屬性值是以 value 結尾的元素。
[attr=value]*
表示帶有以 attr 命名的屬性，且屬性值至少包含乙個 value 值的元素。
[attr operator value i]
在屬性選擇器的右方括號前新增乙個用空格隔開的字母 i（或 i），可以在匹配屬性值時忽略大小寫（支援 ascii 字元範圍之內的字母）。
[attr operator value s]
在屬性選擇器的右方括號前新增乙個用空格隔開的字母 s（或 s），可以在匹配屬性值時區分大小寫（支援 ascii 字元範圍之內的字母）。
/* 存在title屬性的元素 */
a[title]
/* 存在href屬性並且屬性值匹配""的元素 */
a[href=""]
/* 存在href屬性並且屬性值結尾是".org"的元素 */
a[href$=".org"]
/* 存在class屬性並且屬性值包含以空格分隔的"logo"的元素 */
a[class~="logo"]
/* 以 "#" 開頭的頁面本地鏈結 */
a[href^="#"]
/* 包含 "example" 的鏈結 */
a[href*="example"]
/* 包含 "insensitive" 的鏈結,不區分大小寫 */
a[href*="insensitive" i]
/* 包含 "case" 的鏈結，區分大小寫 */
a[href*="case" s]
span,
div
:is()，但是會影響整個選擇器列表的優先順序。
後代元素選擇器 ( a b)
/* p可能是div的子孫重孫等等 */
div p
/* p肯定是div的兒子 */
div > p
/* img後面所有同級的p將被選中 */
img ~ p
/* img後面緊跟著的p將被選中 */
img + p
為選擇的元素的 特殊狀態 應用樣式
/* 所有使用者指標懸停的按鈕 */
button:hover
可被用於為乙個元素的 特定部分 應用樣式
/* 每乙個 元素的第一行。 */
p::first-line
千位：內聯樣式，即宣告在style的屬性，1000
百位：id選擇器，0100
十位：類選擇器、屬性選擇器、偽類，0010
個位：元素、偽元素選擇器，0001
在計算時不進製，即使一百個十位也比不了乙個百位，級別碾壓。
通用選擇器 (*)，組合符 (+, >, ~, 』 ')，和否定偽類 (:not) 不會影響優先順序。看下圖：
h1 + p::first-letter的選擇器權重：
選擇器選擇器型別
權重h1
標籤選擇器
0001
p標籤選擇器
0001
::first-letter
偽元素選擇器
0001
合計0003
li > a[href*="en-us"] > .inline-warning的選擇器權重：
選擇器選擇器型別
權重li
標籤選擇器
0001
a標籤選擇器
0001
[href*=「en-us」]
屬性選擇器
0010
.inline-warning
類選擇器
0010
合計0022
下面這個例子中的111、222分明是什麼顏色，你答對了嗎？
CSS選擇器及其優先順序排序
css選擇器如下 css的選擇器其實大類的話可以分為三類，即id選擇器 class選擇器 標籤選擇器。用法如下 其中，他們之間又可以以不同的方式進行組合，如下 完整css選擇器參考手冊 下面列表中，選擇器型別的優先順序是遞增的 型別選擇器 type selectors 例如,h1 和 偽元素 pse...
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...
CSS 選擇器優先順序
css優先順序包含四個級別 文內選擇器，id選擇器，class選擇器，元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...