CSS 选择器

常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定类型的 HTML 元素	p 选择 <p>
全局选择器	选中了文档中的所有内容	*
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID	#my-id 选择 <p id="my-id"> 或 <a id="my-id">
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	.my-class 选择<p class="my-class"> 和 <a class="my-class">
指向特定元素的类	建立一个指向应用一个类的特定元素	span.highlight { *background-color: yellow;***}**选择所有 <span> 元素中带有 “highlight” 类的元素
属性选择器	拥有特定属性的元素	img[src] 选择 <img src="myimage.png"> 但不是 <img>
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上）	a:hover 选择仅在鼠标指针悬停在链接上时的 <a> 元素
关系选择器	可以将其他选择器组合起来，更复杂的选择元素	article > p选择所有直接位于 <article>元素内的 <p> 元素，而不包括嵌套在更深层次的其他元素中的 <p> 元素。

选择器列表

如果你有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的 CSS，那么我可以把它们写成两个分开的规则。

h1 {
  color: blue;
}

.special {
  color: blue;
}

也可以将它们组合起来，在它们之间加上一个逗号，变为选择器列表。

h1, 
.special {
  color: blue;
}

属性选择器

存否和值选择器

这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

选择器	示例	描述
[attr]	a[title]	匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value]	a[href=”https://example.com"]	匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
[attr~=value]	p[class~=”special”]	匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。
[attr|=value]	div[lang|=”zh”]	匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

子字符串匹配选择器

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^=”box-“]来把它们两个都选中。

选择器	示例	描述
[attr^=value]	li[class^=”box-“]	匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value]	li[class$=”-box”]	匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value]	li[class*=”box”]	匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

大小写敏感

如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。

li[class^="a" i] {
  color: red;
}

伪类和伪元素

什么是伪类？

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。

• 伪类就是开头为冒号的关键字「:」

简单伪类示例

示例：想要让一篇文章中的第一段变大加粗，要是文档的头部又加上一段的话呢？我们会需要把这个类挪到新加的这段上。假如我们不加类，我们可以使用**:first-child*伪类选择器——这将一直*选中文章中的第一个子元素，我们将不再需要编辑 HTML。

article p:first-child {
  font-size: 120%;
  font-weight: bold;
}

用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。

• :hover——只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
• :focus——只会在用户使用键盘控制，选定元素的时候激活。

伪元素是啥？

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号「::」

例如，如果你想选中一段的第一行，你可以把它用一个<span>元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。

::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

这表现得就像是<span>神奇地包在第一个被格式化的行一样，每当行长改变的时候还会更新。

把伪类和伪元素组合起来

如果你想让第一段的第一行加粗，你需要把:first-child和::first-line选择器放到一起。

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

生成带有::before 和::after 的内容

有一组特别的伪元素，它们和content属性一同使用，使用 CSS 将内容插入到你的文档中中。

::before和::after伪元素与content属性的共同使用，在 CSS 中被叫做“生成内容”。

这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。

.box::after {
  content: " ➥";
}

.box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  border: 1px solid black;
}

关系选择器

后代选择器

后代选择器——典型用单个空格——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。

示例中，只会匹配处于带有.box类的元素里面的<p>元素。

.box p {
  color: red;
}

子代关系选择器

子代关系选择器是个大于号（>），只会在选择器选中所有直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

例如，只选中作为<article>的直接子元素的<p>元素。

article > p

邻接兄弟

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。

例如，选中所有紧随<p>元素之后的<img>元素：

p + img

通用兄弟

如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。

要选中所有的<p>元素后任何地方的<img>元素，我们会这样做：

p ~ img