选择器的种类

基础选择器

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的选择器权重：

选择器	选择器类型	权重
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