CSS选择器

基本选择器

元素/标签 选择器

/*匹配标签为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) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。

伪类	选择的元素
:link	未访问的链接
:visited	访问过的链接
:focus	获得焦点的元素
:hover	鼠标光标停留在这个元素
:active	激活的元素

其他常用伪类

伪类	说明
:first-child	一组兄弟元素中的第一个元素
:nth-child
:nth-last-child
:nth-of-type
:first-of-type	一组兄弟元素中其类型的第一个元素
:last-of-type
:empty	没有子元素的元素
:target	被链接的元素，类似#p1
:checked
:enabled
:disabled

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

伪元素

伪元素	说明
::after	创建一个伪元素，做为已选中元素的最后一个子元素
::before	创建一个伪元素，其将成为匹配选中的元素的第一个子元素
::selection	应用于文档中被用户高亮的部分，如鼠标选中
::first-letter	选中某 块级元素 第一行的第一个字母
::first-line	选中某 块级元素 第一行

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