CSS 选择器是 CSS 中最基础且最重要的概念之一，它用于“选择”您想要设置样式的 HTML 元素。简略挑选器

• 星号 —— *
• 通用挑选器，能够挑选任何的元素
• 类型挑选器｜type selector —— div svg|a
• 也叫做 type selector, 也便是说它挑选的是元素中的 tagName (标签名) 特点
• tagName 也是咱们平常常用的的挑选器
• 可是因为 HTML 也是有命名空间的，它主要有三个：HTML、SVG、MathML
• 假如咱们想选 SVG 或许 MathML 里边特定的元素，咱们就有必要要用到单竖线 | ，CSS挑选器里边单竖线是一个命名空间的分隔符，而HTML 里边命名空间分隔符是 冒号 : 。然后前面提到的命名空间是需要 @namespace 来声明的，他们是合作运用的，可是这个命名空间的运用不是很频繁，它的存在仅仅为了一个齐备性考虑，HTML 和 SVG当中仅有一个堆叠的元素名就只有一个 a
• 所以咱们能够以为，类型挑选器便是一个简略的文本字符串即可
• 类挑选器｜class selector —— .class-name
• 以 . 初的挑选器便是 class 挑选器，也是经典之一
• 它会挑选一个 class，咱们也能够用空格做分隔符来拟定多个 class 的
• 这个 .class 只需匹配中其间一个就能够了
• ID 挑选器｜id selector —— #id
• 以 # 初加上 ID 名选中一个 ID
• 这个是严厉匹配的
• ID 里边是能够加减号或许是其他符号的
• 特点挑选器｜attribute selector —— [attr=value]
• 它包括了 class 特点挑选器和 id 挑选器
• 这个挑选器的完整语法便是 attr=value，等于前面是特点名，后边是特点值
• 这儿边的等号前面能够加 ～ 就表明像 class 相同，能够支撑拿空格分隔的值的序列：attr~=value
• 假如在等号前面加单竖线，表明这个特点以这个值初即可：attr|=value
• 假如咱们对优先级没有特别要求的话，咱们理论上是能够用特点挑选器来代替 class 挑选器和 id 挑选器的
• 伪类 —— :hover
• 以 : 初的，它主要是一些特点的特别状况
• 这个跟咱们写的 HTML 没有联系，八成来自于交互和作用
• 一些伪类挑选器是带有函数的伪类挑选器，这些咱们都是能够去运用伪类来解决的
• 伪元素挑选器 —— ::before
• 一般来说是以 :: 双冒号初的
• 实践上是支撑运用单冒号的，可是咱们发起双冒号这个写法
• 因为咱们能够一眼就看出这个是伪元素挑选器，和伪类区别开来
• 伪元素属于选中一些本来不存在的元素
• 假如咱们不挑选它们，这个地方就不存在这个元素了，挑选后就会多了一个元素

复合挑选器

• <简略挑选器><简略挑选器><简略挑选器>
• * 或则 div 有必要写在前面

首要复合挑选器是以多个简略挑选器构成的，只需把简略挑选器挨着写就变成一个复合挑选器了。它的语义便是咱们选中的元素有必要一起 match 几个简略挑选器，形成了 “与” 的联系。

杂乱挑选器

复合挑选器中心用连接符就能够变成杂乱挑选器了，杂乱挑选器是针对一个元素的结构来进行挑选的。

• <复合挑选器> <复合挑选器> —— 后代挑选器，单个元素有必要要有空格左边的一个父级节点或许先人节点
• <复合挑选器> ">" <复合挑选器> —— 父子挑选器，有必要是元素直接的上级父元素
• <复合挑选器> "~" <复合挑选器> —— 邻接联系挑选器
• <复合挑选器> "+" <复合挑选器> —— 邻接联系挑选器
• <复合挑选器> "||" <复合挑选器> —— 双竖线是 Selector Level 4 才有的，当咱们做表格的时分能够选中每一个列

CSS 伪类

伪类其实是一类十分多的内容的简略挑选器。

链接/行为

• :any-link —— 能够匹配任何的超链接
• :link —— 还没有拜访过的超链接
• :link :visited —— 匹配所有被拜访过的超链接
• :hover —— 用户鼠标放在元素上之后的状况，之前是只能对超链接收效，可是现在是能够在许多元素中运用了
• :active —— 之前也是只对超链接收效的，点击之后当前的链接就会收效
• :focus —— 便是焦点在这个元素中的状况，一般用于 input 标签，其实任何能够取得焦点的元素都能够运用
• :target —— 链接到当前的方针，这个不是给超链接用的，是给锚点的a 标签运用的，便是当前的 HASH指向了当前的a 标签的话就会激活target 伪类

一旦运用了:link 或许:visited 之后，咱们就再也无法对这个元素的文字色彩之外的特点进行更改。为什么要这样规划呢？因为一旦咱们运用了 layout 相关的特点，比如说咱们给:visited 的尺寸加大一点，它就会影响排班。这样咱们就能够经过 JavaScript 的 API 去获取这个链接是否被拜访过了。可是假如咱们能取得链接是否被拜访过了，那么咱们就能够知道用户拜访过那些网站了，这个对于阅读器的安全性来说是一个致命打击。所以这儿也提醒一下咱们，不要以为做一些表现性的东西与安全没有任何联系，其实安全性是一个综合的考量。CSS 它也能造成安全漏洞的。

树结构

• :empty —— 这个元素是否有子元素
• :nth-child() —— 是父元素的第几个儿子（child）
• :nth-last-child() —— 与nth-child 相同，只不过从后往前数
• :first-child :last-child :only-child

:nth-child 是一个十分杂乱的伪类，里边支撑一种语法，比如说能够在括号里边写奇偶event 或许odd，也能够写4N+1、3N-1，这个就会分别匹配到整数的形态。因为这个是一个比较杂乱的挑选器，咱们就不要在里边写过于杂乱的表达式了，只用它来处理一下奇偶，逢3个多1个，逢4个多1个等等这种表达式。

其实empty 、nth-last-child、last-child、only-child 这两个挑选器，是破坏了咱们之前在 《完成中学习阅读器原理》中的提到的 CSS 核算的时机问题。咱们能够幻想一下，当咱们在开始标签核算的时分，必定不知道它有没有子标签。empty 影响不是特别大，可是last-child 的这个联系其实仍是影响蛮大的。所以阅读在完成这些的时分是做了特别处理的，要么便是阅读器完成的不是特别好，要么便是阅读器要消耗更大的性能来得以完成。所以主张咱们尽量避免大量运用这些。

逻辑型

• :not 伪类 —— 主流阅读器只支撑简略挑选器的序列（复合挑选器）咱们是没有办法在里边写杂乱挑选器的语法的
• :where :has —— 在 CSS Level 4 加入了这两个十分强大了逻辑型伪类

这儿仍是想温馨主张一下咱们，不主张咱们把挑选器写的过于杂乱，咱们许多时分都能够多加一点 class 去解决的。假如咱们的挑选器写的过于杂乱，某种程度上意味着 HTML 结构写的不合理。咱们不可是为了给阅读器工程省费事，也不可是为了性能，而是为了咱们本身的代码结构考虑，所以咱们不应该呈现过于杂乱的挑选器。

CSS 伪元素

总共分为 4 种

• ::before
• ::after
• ::first-line
• ::first-letter

::before 和::after 是在元素的内容的前和后，刺进一个伪元素。一旦应用了 before 和 after 的特点，declaration（声明）里边就能够写一个叫做content 的特点（一般元素是没有办法写 content 的特点的）。content 的特点就像一个真正的 DOM 元素相同，能够去生成盒，能够参加后续的排版和烘托了。所以咱们能够给他声明border、background等这样的特点。

能够理解为：伪元素向界面上增加了一个不存在的元素。

::first-line 和::first-letter 的机制就不相同了。这两个其实本来就存在 content 之中。他们顾名思义便是 选中“榜首行” 和选中 “榜首个字母”。它们 不是一个不存在的元素，是把一部分的文本括了起来让咱们能够对它进行一些处理。

before 和 after

在咱们概念里，咱们能够以为带有 before 伪元素的挑选器，会给他实践选中的元素的内容前面增加了一个元素，咱们只需要经过他的 content 特点为它增加文本内容即可。（这儿咱们也能够给伪元素赋予content: '' 为空的）所以咱们能够任何的给 before 和 after 指定 display 特点，和不同元素相同比较自由的。

咱们在完成一些组建的时分，也会常常运用这种不污染 DOM 树，可是能实践发明视觉作用的方式来给页面增加一些修饰性的内容。

<div>

  <::before/>

  content content content content

  content content content content

  content content content content

  content content content content

  <::after/>

div>

first-letter 和 first-line

first-letter 相当于咱们有一个元素把内容里边的榜首个字母给括了起来。这个first-letter 咱们是能够恣意声明各种不同的特点的，可是咱们是无法改动它的 content 的。咱们应该都看到过报纸上的榜首个字母会比较大，然后会游离出来的作用，这个在 CSS 里边咱们就能够用::first-letter的伪元素挑选器了。运用这个来完成比较用 JavaScript 来完成就会愈加安稳和代码愈加高雅一些。

<div>

  <::first-letter>c::first-letter>ontent content content content

  content content content content

  content content content content

  content content content content

div>

first-line 是针对排版之后的line，其实跟咱们源码里边的first line 没有任何的联系的。假如说咱们的阅读器供给的烘托的宽度不同，first-line 在两个环境里边它终括住的元素数量就不相同多了。所以咱们用这个挑选器的时分需要去根据需求的状况运用，很有可能在咱们开发机器上和用户的机器上烘托出来的作用是不相同的！