技術標籤：炫酷的CSScsscss3前端

選擇器的種類

基礎選擇器

1. 標籤選擇器 (tagName)

body { 
	width: 100%;
	background: pink;
}

2. 類選擇器 (.)

.class { 
	width: 100%;
	background: pink;
}

3. ID選擇器 (#)

#id { 
	width: 100%;
	background: pink;
}

4. 通配選擇器 (*)

   在CSS3中,星號(*)可以和名稱空間組合使用:
   ns| * - 會匹配ns名稱空間下的所有元素
   * | * - 會匹配所有名稱空間下的所有元素
   | * - 會匹配所有沒有名稱空間的元素

5. 屬性選擇器 ([])

   屬性選擇器通過已經存在的屬性名或屬性值匹配元素

   語法:
   [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> 元素 */
a[title] {
  color: purple;
}

/* 存在href屬性並且屬性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href屬性並且屬性值結尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class屬性並且屬性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}
/* 以 "#" 開頭的頁面本地連結 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的連結 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的連結,不區分大小寫 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的連結，區分大小寫 */ 
a[href*="cAsE" s] { 
  color: pink; 
}


 
### 組選擇器（選擇器列表）
```css
span, 
div {
  border: red 2px solid;
}

選擇器列表無效化：
在選擇器列表中，如果有一個選擇器不被支援，那麼整條規則就會失效。這種情況下可以使用:is()，但是會影響整個選擇器列表的優先順序。

關係選擇器

1. 後代元素選擇器 ( A B)

/* p可能是div的子孫重孫等等 */
div p {
	color: red;
}

2. 直接子元素選擇器 (A > B)

/* p肯定是div的兒子 */
div > p {
	color: red;
}

3. 兄弟元素選擇器 (A ~ B)

/* img後面所有同級的p將被選中 */
img ~ p{
	background: grey;
}

4. 鄰近兄弟元素選擇器 (A + B)

/* img後面緊跟著的p將被選中 */
img + p {
  font-style: bold;
}

偽選擇器

1. 偽類 ( : )
   為選擇的元素的 特殊狀態 應用樣式

/* 所有使用者指標懸停的按鈕 */
button:hover {
  color: blue;
}

2. 偽元素 ( :: )
   可被用於為一個元素的 特定部分 應用樣式

/* 每一個 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

選擇器優先順序

一個選擇器的優先順序由四位陣列成

1. 千位：內聯樣式，即宣告在style的屬性，1000
2. 百位：ID選擇器，0100
3. 十位：類選擇器、屬性選擇器、偽類，0010
4. 個位：元素、偽元素選擇器，0001

在計算時不進位，即使一百個十位也比不了一個百位，級別碾壓。

通用選擇器 (*)，組合符 (+, >, ~, ’ ')，和否定偽類 (:not) 不會影響優先順序。

看下圖：

h1 + p::first-letter的選擇器權重：

li > a[href*="en-US"] > .inline-warning的選擇器權重：