基本选择器
元素选择器
选择指定的 HTML 元素
p {
color: blue;
}类选择器
选择具有指定类名的元素
.my-class {
color: blue;
}ID 选择器
选择具有指定 ID 的元素
#my-id {
color: blue;
}通配符选择器
选择所有元素
* {
color: blue;
}组合选择器
只想匹配同时带有所有这些选择器的元素，可以将这些选择器不加空格地连成一串
.a.b.c {
color: blue;
}分组选择器
同时对几个选择器应用相同样式
h1, h2, .highlight {
color: blue;
}关系选择器
后代选择器
空格分隔，选择元素内所有指定子元素
div p {
color: blue;
}子代选择器
选择某元素的直接子元素
div > p {
color: blue;
}邻接兄弟选择器
选择紧接在某元素后的兄弟元素
h1 + p {
color: blue;
}通用兄弟选择器
选择某元素之后的所有兄弟元素
h1 ~ p {
color: blue;
}属性选择器
存在属性选择器
选择具有指定属性的元素
a[target] {
color: blue;
}属性值选择器
选择属性值等于指定值的元素
a[target="_blank"] {
color: blue;
}属性值包含选择器
选择属性值包含指定子串的元素
a[href*="example"] {
color: blue;
}属性值包含单词选择器
属性值是空格分隔的列表，其中有一个词是 value，也就是两边有空格分割
a[class~=hello] {
color: blue;
}属性值以指定值开头选择器
选择属性值以指定值开头的元素
a[href^="https"] {
color: blue;
}属性值以指定值结尾选择器
选择属性值以指定值结尾的元素
a[href$=".com"] {
color: blue;
}属性值连字符选择器
一般用在国际化，如 zh 可以匹配 zh zh-cn…
div[lang|="zh"] {
color: blue;
}大小写不敏感
在闭合括号之前，加上 i 值
a[href*="example" i] {
color: blue;
}伪类选择器
选择处于特定状态的元素
:root：匹配文档树的根元素<html>
伪元素选择器
选择元素的特定部分（表现得像加入全新的 HTML 元素一样，而不是向现有的元素上应用类）
::before：在原有元素的实际内容之前的一个可样式化元素::after：在原有元素的实际内容之后的一个可样式化元素::first-letter：元素的第一个字母::first-line：包含此伪元素的元素的第一行::selection：文档中被选择的那部分