在css中，选择器用于为样式表选择需要添加当前样式的元素。

选择器的分类

id选择器和类选择器

这是用得最多的选择器，id选择器通过#号后面跟随id名使用，类选择器根据.号后面跟随类名来选择，这二者最大的差别在于id对应的元素只有一个，但类对应的元素可能会有多个。

类型选择器和全体选择器（也叫通配符选择器）

类型选择器可以直接通过一个标签名来选择元素而不需要任何符号，比如我们可以这样来选择一个p标签：

p{
    
}

全体选择器的用法和类选择器一样，我们可以将他看做是一个特殊的类选择器，用符号*来选择当前所有元素。

属性选择器

可以选择拥有指定属性的元素，可以和上面的选择器配合使用（当和全体选择器配合使用的时候，符号*可以省略）。

/* 拥有attr属性的所有元素 */
[attr]{
}
/* 类名为test且拥有attr属性的所有元素 */
.test[attr]{
}
/* id为test且拥有attr属性的元素 */
#test[]{
}

下面罗列了属性选择器的七种使用形态，我们分别用这七种方式来获取下面这个div：

<div title="hello world" lang="en-us">hello world</div>

[attribute] 用于选取带有指定属性的元素。 (可以通过title属性或者lang属性来获取)

[title]{
    color:red;
}
[lang]{
    color:red
}

[attribute=value]用于选取带有指定属性和值的元素。（可以通过title属性或者lang属性来获取）

[title="hello world"]{ /* 这个地方有空格，所以这里必须加个引号 */
 color:red
}
[lang=en-us]{
    color:red;
}

[attribute~=value]用于选取属性值中包含指定词汇的元素。（必须是完整的单词，单词之间用空格隔开）

[title~=world]{ /* 这里也可以是hello，和前后没有关系 */
    color:red;
}
[lang~=en-us]{ /* en-us是一个单词 */
    color:red;
}

[attribute|=value]用于选取带有以指定值开头的属性值的元素。(必须是整个单词，或者后面跟着连字符-，所以可以用下面三种方式来赋值)

[lang|=en]{ /* en后面是连字符*/
    color:red;
}
[title|="hello world"]{
    color:red;
}
[lang|=en-us]{ 
    color:red;
}

[attribute^=value]匹配属性值以指定值开头的每个元素。(不要求整个单词，只要开头能匹配上)

[title^=h]{
    color:red
}
[lang^=e]{
    color:red;
}

[attribute$=value]匹配属性值以指定值结尾的每个元素。(不要求整个单词，只要结尾能匹配上)

[title$=d]{
    color:red
}
[lang$=s]{
    color:red;
}

[attribute=value*]匹配属性值中包含指定值的每个元素。（适用范围比上面两种更广，对字母的位置没有限制，不要求整个单词，单独匹配一个符号时需要加引号）

[title*=' ']{
    color:red;
}
[lang*='-']{
    color:red;
}
[lang*='-u']{
    color:red;
}

伪类选择器

以冒号开头的选择器，有普通型和函数型两种，它可以用来添加一些特殊效果。从功能上，我们可以把伪类分为以下四类来看。

树结构伪类选择器

:root伪类，用于选择根元素，在HTML中，事实上等同于直接用html标签来选择，但是他的优先级要高于直接用html标签。
:empty伪类，用于查找没有子节点的元素。
:only-chid 用于选择唯一一个子元素
:first-child :last-child 分别表示第一个和最后一个子元素
:nth-child(n) :nth-last-child(n)两个函数式的伪类，区别是一个是从前往后数的第n个，另一个是从后往前数的第n个，这里的n可以传入一个数字或者是一个关键词或者是一个表达式。（数字的情况这里不做举例，n可以支持两个关键词odd和even，分别代表匹配第奇数个和第偶数个。他也可以支持传入一个表达式，比如传入2n+1来获取第奇数个）
:nth-of-type :nth-last-of-type :first-of-type :last-of-type :only-of-type用法上和上面的一致，但是在计算子元素的时候，只会计算这一类元素，忽略其他类型元素，这个在一定程度上会比上面的更加有用。

链接与行为伪类选择器

这是非常常用的一类伪类选择器，这里举几个比较常用的例子：

:link 表示未被访问过的链接
:visited 表示已经被访问过的链接
:hover 表示鼠标悬停的元素
:active 正在被激活的元素，比如鼠标点击button，还没有放开的情况
:focus 聚焦的元素，比如输入框
:checked 选中的表单元素
:disabled 被禁用的表单元素
:target 在url中链接到的元素

逻辑伪类选择器

:not 排除not中的条件

/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
  color: green;
}

/* 非 <p> 元素 */ 
body :not(p) {
  text-decoration: underline;
}

/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
/* 注意，此语法尚未获广泛支持。 */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

其他伪类

还有一些比较不常用的选择器，如::lang等，这里不做赘述。
点击这里可以看到所有的伪类。

选择器优先级

简单理解一下选择器的优先级，由高到低分别为：
!important > 内联样式（10000）> ID选择器（0100） > 类选择器，属性选择器，伪类选择器（0010） > 元素选择器，关系选择器，伪元素选择器（0001） > 全体选择器（0000）

选择器的组合

在日益复杂的前端界面开发中，仅仅是靠着上面的简单选择器很容易导致css污染的情况发生，选择器的组合使用尤为重要。
我们先来看一下，在css编写的过程中，可能出现的特殊符号：

无连接符号(一定要注意有没有空格)

.a.b{ /* 需要同时满足具有a和b两个class */
}

空格（后代）

.a .b{ /* 选中class为a的节点下的class为b的节点，b可以为a的子节点的子节点 */
}

>（子代）

.a>.b{ /* 选中class为a的节点下的class为b的子节点，b必须为a的子节点 */
}

~（后继）

.a~.b{ /* class为a和b的元素处于同一个父节点下，且b元素在a元素后面 */
}

+（直接后继）

.a+.b{ /* class为a和b的元素处于同一个父节点下，且b元素是a元素后面的第一个元素 */
}

|| （列选择器，用于表格）

.a || td { 
}

, （逻辑或）

.a,.b{ /* 只要class为a或者b */
}

伪元素

伪元素之所以被称之为是伪元素，因为他们在html中没有真正对应的元素，但是他们的表现行为却和真正的页面元素一样，他们非常的好用，可以让我们的开发更加的简单。
这里我们主要来介绍两种最为常用的伪元素::before和::after，用于分别在元素的前面和后面生成一个原本并不存在的元素，需要注意的是，这两个伪元素要起作用，要给他们的css规则中指定一个content的属性：

.a::before{
    content:'';
}

值得注意的是，这里的content还支持一个counter函数，我们可以这样给一个列表每个元素前都增加一个序号：

<div class="test">
    <div></div>
    <div></div>
    <div></div>
</div>

.test>div{
    counter-increment: countName;
}
.test>div::before{
    content: counter(countName) ". ";
}

我们可以在这里查看所有的伪元素。

聊一聊选择器