CSS-选择器

前言：

---

选择器是 CSS 规则的一部分且位于 CSS 声明块前，规定了 CSS 规则会被应用到哪些元素上。

选择器可以被分为以下类别：

• 简单选择器（Simple selectors）：通过元素类型、标签、class 或 id 匹配一个或多个元素。
• 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
• 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM 树中一父节点的第一个子节点。
• 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
• 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。
• 多用选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个 CSS 规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
  
  

简单选择器：

---

类型选择器（元素选择器、标签选择器）：

此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。

p { font-size: 2em; }

类选择器（Class selectors）：

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。

.info { background: #ff0; }

ID 选择器：

ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己选择的ID是什么。 这是选择单个元素的最有效的方式。

#info { background: #ff0; }

注意：一个ID名称必须在文件中是唯一的。关于重复ID的行为是不可预测的，比如在一些浏览器只是第一个实例计算，其余的将被忽略。

通用选择器（Universal selector）：

通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用。

* { margin: 0; padding: 0; }

注意：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。不会有太多的情况下，您想使用此选择。

属性选择器：

---

属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。属性选择器可以根据其匹配属性值的方式分为两类：存在和值属性选择器和子串值属性选择器。

存在和值（Presence and value）属性选择器：

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
• [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

p[title] { color: #f00; }

div[class=error] { color: #f00; }

td[headers~=col1] { color: #f00; }

子串值（Substring value）属性选择器：

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

• [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
• [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
• [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
• [attr*=val] : 选择attr属性的值中包含字符串val的元素。

p[lang|=en] { color: #f00; }

div[id^="nav"] { background: #ff0; }

div[id$="nav"] { background: #ff0; }

div[id*="nav"] { background: #ff0; }

伪类（Pseudo-class）：

---

一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个 checkbox 被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。

• :active
• :any
• :checked
• :default
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :fullscreen
• :focus
• :hover
• :indeterminate
• :in-range
• :invalid
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :valid
• :visited

p:first-child { font-style: italic; }

input[type=text]:focus { color: #000; background: #ffe; }

input[type=text]:focus:hover { background: #fff; }

q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

伪元素（Pseudo-element）：

---

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 :: —— 同样是添加到选择器后面达到指定某个元素的某个部分。

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

p:first-line { font-weight:bold; color;#600; }

.preamble:first-letter { font-size:1.5em; font-weight:bold; }

a:link:after { content: " (" attr(href) ") "; }

组合器（Combinators）:

---

在CSS中，组合器允许您将多个选择器组合在一起，这允许您在其他元素中选择元素，或者与其他元素相邻。四种可用的类型是：

• 后代选择器——（空格键）——：允许您选择嵌套在另一个元素中的某个元素（不一定是直接的后代;例如，它可以是一个孙子）。
• 子选择器——（>）——：允许您选择一个元素，该元素是另一个元素的直接子元素。
• 相邻兄弟选择器—— （+）——允许您选择一个元素，它是另一个元素的直接兄弟元素(也就是说，在它的旁边，在层次结构的同一层)。
• 通用兄弟选择器—— （~） — —允许您选择其他元素的兄弟元素(例如，在层次结构中的相同级别，但不一定就在它的旁边)。

section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}

多用选择器（Multiple selectors）：

---

通过逗号（comma）将两个选择器隔开，再应用其共同的样式：

h1,
.title {
	font-size: 20px;
}