用于“查找”（或选取）要设置样式的 HTML 元素。

选择器	示例
[类型选择器]	`h1 { }`
[通配选择器]	`* { }`
[类选择器]	`.box { }`
[ID选择器]	`#unique { }`
[标签属性/属性选择器]	`a[title] { }`
[伪类选择器]	`p:first-child { }`
[伪元素选择器]	`p::first-line { }`
[后代选择器]	`article p`
[子代选择器]	`article > p`
[相邻兄弟选择器]	`h1 + p`
[通用兄弟选择器]	`h1 ~ p`

选择器列表

如果有多个选择器使用同一个样式，可以把这些选择器组合起来形成一个选择器列表。方式是用‘，’隔开。

h1,
.special {       //选择器列表里面任意一个选择器无效，那么整条规则都会被忽略。
  color: blue;
}

组合器

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

1.元素选择器

CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素. h1 { }

2.选择器分组

3.类选择器

4.id选择器

5.属性选择器

选择器	示例
[attribute]	`a[target]{ }`	选择器用于选取带有指定属性的元素。
[attribute="value"]	`a[target="_blank"]{ }`	选取带有指定属性和值的元素。
[attribute~="value"]	`[title~="flower"]{}`	属性值包含指定词的元素。 title 属性包含 "flower" 单词的所有元素.上面的例子会匹配以下属性的元素：`title="flower"、title="summer flower"` 以及 `title="flower new"`，但不匹配：`title="my-flower"` 或 `title="flowers"`。
[attribute 竖杠="value"]	`[calss竖杠="top"]{ }`	选取 class 属性以 "top" 开头的所有元素,`注释`：值必须是`完整或单独`的单词，比如 `class="top"` 或者后跟连字符的，比如 `class="top-text"`。：
`[attribute^="value"]`	`[class^="top"] { }`	选取 class 属性以 "top" 开头的所有元素：提示：`值不必是完整单词！`
[attribute$="value"]	`[class$="test"]{ }`	选取 class 属性以 "test" 结尾的所有元素：提示：`值不必是完整单词！`
[attribute*="value"]	`[class=*"te"]{ }`	下例选取 class 属性包含 "te" 的所有元素：提示：`值不必是完整单词！`

6.后代选择器

7.子选择器

8.相邻选择器

选择器	示例	示例描述
element element后代选择器	div p	选择 `<div>` 元素内的所有`<p>`元素。
element>element 子选择器	div > p	选择其父元素是 `<div>` 元素的所有`<p>`元素。
element+element 相邻兄弟选择器	div + p	选择所有紧随 `<div>` 元素之后的`<p>`元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
element1~element2 通用选择器	p ~ ul	选择前面有 `<p>` 元素的每个`<ul>`元素。属于 `<p>` 元素的同级元素的所有 `<ul>` 元素：

9.伪类选择器--状态

用于定义元素的特殊状态。

锚伪类`<a>`

链接能够以不同的方式显示：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */ 
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

`<div>`

悬停在 <div> 上在<div>元素上使用 :hover 伪类的实例：

div:hover {
  background-color: blue;
}

简单的工具提示悬停

把鼠标悬停到 <div> 元素以显示<p>元素（类似工具提示的效果）：

div:hover p {
  display: block;
}

:first-child

伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。匹配首个 <p> 元素

p:first-child {  //选择器匹配作为任何元素的第一个子元素的任何`<p> `元素：
  color: blue;
}

p i:first-child{
  color: blue;       //## 匹配所有 <p> 元素中的首个 <i> 元素
    }
                    
p:first-child i {    // ## 所有首个 <p> 元素中的所有 <i> 元素
  color: blue;
}

:lang

伪类允许您为不同的语言定义特殊的规则。

为属性为 lang="en" 的 <q> 元素定义引号

q:lang(en){
    quotes:"~" "~";
}

所有 CSS 伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 `<input>` 元素。
:disabled	input:disabled	选择每个被禁用的 `<input>` 元素。
:empty	p:empty	选择没有子元素的每个 `<p>` 元素。
:enabled	input:enabled	选择每个已启用的 `<input>` 元素。
:first-child	p:first-child	选择p作为首个子元素的每个 `<p>` 元素。父元素不一定，h和p是单独的
:first-of-type	p:first-of-type	选择作为其父的首个 `<p>` 元素的每个 `<p>` 元素。p是首个p元素，不一定是首个子元素、
:focus	input:focus	选择获得焦点的 `<input>` 元素。 input:focus{}
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的`<input>`元素。 input里面有maxmin，只有在范围内的才有相关样式
:invalid	input:invalid	选择所有具有无效值的 `<input>` 元素。所有input输入的内容不符合要求，会显示样式
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 `<p>` 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 `<p>` 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个`<p>` 元素的每个`<p>` 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 `<p>` 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 `<p>` 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个`<p>`元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个`<p>`元素的每个`<p>`元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个`<p>`元素的每个`<p>`元素。
:only-of-type	p:only-of-type	选择作为其父的唯一`<p>`元素的每个 `<p>` 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的`<p>`元素。
:optional	input:optional	选择不带 "required" 属性的 `<input>` 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的`<input>` 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 `<input>` 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 `<input>` 元素。
:required	input:required	选择指定了 "required" 属性的 `<input>` 元素。
:root	root	选择元素的根元素。在 HTML 中，根元素始终是 html 元素。
*:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。
:valid	input:valid	选择所有具有有效值的 `<input>` 元素。
:visited	a:visited	选择所有已访问的链接。

10.伪元素选择器--元素的一部分

选取元素里面的一部分并设置其样式

所有 CSS 伪元素

选择器	例子	例子描述
::after	p::after	（`插入内容`）在每个 `<p>` 元素之后插入内容。
::before	p::before	（`插入内容`）在每个 `<p>` 元素内容之前插入内容。使用 `content` 属性来指定要插入的内容。
::first-letter	p::first-letter	(`设置样式等，选中`)选择每个 `<p>` 元素的`首字母`。
::first-line	p::first-line	(`设置样式等，选中`)选择每个 `<p>` 元素的`首行`。
::selection	p::selection	(`设置样式等，选中`)选择用户选择的元素部分。配合`链接`使用

2.2css选择器