基本选择器

元素/标签 选择器

/*匹配标签为div的元素*/
div { display: block; }

类选择器

/*匹配class="blue"的元素*/
.blue { background-color: blue; }

ID选择器

/*匹配id="one"的元素*/
#one { display: block; }

通配选择器

/*匹配所有元素(性能低，不建议使用)*/
* { margin: 0; padding: 0; } 

属性选择器

/*匹配带有title属性的a元素*/
a[title] {
  color: purple;
}

/*匹配带有href属性并且value等于https://example.org的a元素*/
a[href="https://example.org"] {
  color: green;
}

/*匹配带有lang属性并且value是以空格分隔且包含en-us的a元素*/
a[lang~="en-us"] {
  color: blue;
}

/*匹配带有href属性并且value是以#开头的a元素*/
a[href^="#"] {
  color: green;
}

/*匹配带有href属性并且valye是以#one结尾的a元素*/
a[href$="#one"] {
  color: white;
}

/*匹配带有lang属性并且value是以zh-为前缀的a元素*/
a[lang|="zh"] {
  color: black;
}

组合选择器

相邻兄弟选择器 A + B

/*匹配第一个li后面紧跟的同胞li元素*/
li + li { color: red; }

普通兄弟选择器 A ~ B

/*匹配第一个p后面可不紧跟的同胞span元素*/
p ~ span { color: red; }

子选择器 A > B

/*匹配div的直接后代p元素*/
div > p { color: red; }

后代选择器 A B

/*匹配div的所有后代p元素*/
div p { color: red; }

伪类

这五项常用于链接(顺序不能乱)

因为链接的样式是建立在另一个样式之上的，比如第一个规则的样式会应用到所有后续的样式，如果当一个链接被 激活(activated) 的时候，它也是处于 悬停(hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。

其他常用伪类

重点理解 :nth-child 和 :nth-of-type 的区别：示例

伪元素

更多细节可以参考：MDN CSS选择器