前言

当我们学习CSS时最先接触的肯定就是选择器，选择器也是CSS中最为基础的一部分，基本上我们了解到一些CSS的基本选择器、伪类选择器等就可以完成大部分工作。
但是当我们了解到更多的选择器后是可以提升一大截开发体验的，当我发现需要用到某种没用过的选择器时，总是需要网上搜索一番，不如自己整理一下自己实践。

目前来说，CSS选择器分为以下几类：

  • 基本选择器
  • 组合选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

然后，每种类型的选择器又有若干的选择器。

基本选择器

基本选择器基本上来说是我们使用频率最高的选择器，它主要通过类名，标签名等来匹配文档树中的元素。

基本选择器主要是以下几种选择器：

选择器用法含义
通用选择器*匹配所有选择器
标签选择器div匹配所有div元素
类名选择器.selector匹配所有class="selector"的元素
id选择#nav匹配所有id="nav"的元素

组合选择器

组合选择器，顾名思义，就是通过多种选择器组合起来进行匹配，它常常有以下几种用法：

选择器用法含义
多元素选择器div,p匹配所有div和p元素
后代选择器div p匹配所有作为div的后代元素的p元素
子元素选择器div>p匹配所有作为div子元素的p元素
相邻元素选择器div+p匹配紧随div元素之后的p元素
同级元素选择器div~p匹配在div元素之后的所有p元素
交叉选择器div.box匹配所有class="box"的div元素

属性选择器

属性选择器主要是通过元素中的属性来进行匹配。

选择器含义
E[att]匹配所有具有att属性的E元素。E在此处可以省略，如”[cheacked]”，下同。）
E[att=val]匹配所有att属性等于val的E元素
E[att~=val]匹配所有att属性具有多个值，其中一个值等于val的E元素
E[att|=val]匹配所有att属性具有多个连字符分隔的值，其中一个值已val开头的元素
E[att^=”val”]匹配属性att的值以val开头的元素
E[att$=”val”]匹配属性att的值以val结尾的元素
E[att*=”val”]匹配属性att的值中包含val的元素

伪类选择器

用来选择元素的伪类

选择器含义
E:root匹配文档的根元素，等同于HTML元素
E:first-child匹配父元素下面的第一个子元素E
E:last-child匹配父元素下面的最后一个子元素E
E:first-of-type匹配父元素下使用同种标签的第一个子元素E
E:last-of-type匹配父元素下使用同种标签的最后一个子元素E
E:nth-child(n)匹配父元素的第n个子元素
E:nth-last-child(n)匹配父元素的倒数第n个子元素
E:nth-of-type(n)匹配父元素第n个使用同种标签的子元素
E:nth-last-of-type匹配父元素的倒数第n个使用同种标签的元素
E:only-child匹配父元素下唯一的一个一个子元素
E:only-of-type匹配父元素下使用同种标签的唯一一个子元素
E:empty匹配不含任何子元素和内容的元素
E:not(s)匹配不符合当前选择器的所有元素E
E:target匹配特定id通过锚链接定位到的元素

表单伪类

选择器含义
E:enable匹配表单中所有激活的E元素
E:disabled匹配表单中所有禁用的E元素
E:checked匹配表单中被选中的E元素
E::selection匹配所有被选中的E元素
E:focus匹配当前获取焦点的E元素
E:blur匹配当前失去焦点的E元素

链接伪类

选择器含义
E:link匹配所有还未被点击的链接
E:visited匹配所有已被点击的链接
E:active匹配鼠标已经按下，但还没有松开的E元素
E:hover匹配鼠标悬浮其上的E元素

伪元素选择器

选择器含义
E:first-line匹配元素的第一行内容
E:first-letter匹配E元素的第一个字符
E:before匹配E元素之前插入的元素
E:after匹配E元素之后插入的元素

结语

目前css选择器肯定是不止现在这些，应该会有不少漏掉的，选择器分类主要根据网上一些资料以及自己根据相关性进行分类，有些选择器用法来自于网络，由于来源太多就不一一贴出了。