CSS选择器

发表于   |   分类于   |  

在CSS中，选择器常用来把我们想要的样式应用到我们的网页中特定的HTML元素上。有各种各样的CSS选择器可供选择，以便实现细粒度的精度控制。在本文以及后面的文章中，我们将详细的介绍这些不同类型的CSS选择器，并了解他们是如何工作的。

先决条件： 基本的计算机技能，已经安装好了基本的软件，使用文件的基本知识，了解HTML的基础(HTML 介绍)，并且稍微了解一点CSS是如何工作的概念(学习CSS 第一步)

目标：详细的学习CSS选择器是如何工作的。

选择器是什么？

在前面的学习中你已经接触过了选择器。CSS选择器是CSS规则的第一部分。它是一种元素集和其他条款的规则，用来告诉浏览器哪个HTML元素应当被选中并应用CSS规则中的属性值。由选择器选择的一个或多个元素称为选择器的目标。

在前面的文章中，你遇到了多个不同的选择器，并且学习了这些选择器使用不同的方式来定位文档 - 举个例子 h1 是一个元素选择器，.special 是一个类选择器。

在CSS里，选择器被定义在『CSS选择器规范』当中；就是CSS的其他组成部分一样，选择器也需要获得浏览器的支持才能工作。大多数你会遇到的选择器都被定义在 Selectors Level 3 当中，这是一个成熟的规范，因为你可以在这里为这些选择器找到良好的支持。

选择器清单

如果有多个选择器使用了相同的CSS，那么可以将单个选择器组合成一个选择器列表，以便将规则应用于所有的单个选择器。举个例子，如果我在 h1 元素选择器和 .special 类选择器中写了相同的CSS，可以单独写作2个规则。

1
h1 {   color: blue; } .special {   color: blue; }

我也可以通过在他们中间增加一个『逗号』来使他们组合成一个选择器列表。

1
h1, .special {   color: blue; }

在『逗号』之前或之后写一个空格是很有必要的。如果每个选择器都另起一行，你会发现这样更具可读性。

1
h1, .special {  color: blue; }

在下面的实时例子中，试着去合并具有相同声明的2个选择器。组合后他们的展示应该和组合前是一样的。

当你通过这种方式和组合选择器的时候，如果有任意选择器错误的话则整个规则将会被忽略。

在下面的例子中，无效的类选择器将会被忽略，而 h1 元素选择器将会生效，执行样式。

1
h1 {   color: blue; } ..special {   color: blue; }

当他们合并后，因为其中一个是无效的则整体都会被视为无效，所以 h1 元素选择器和类选择器都不会生效。

选择器的类型

下面有几组不同的选择器，了解你需要哪种类型的选择器将会帮助你找到最适合工作的正确工具。在本文的这一部分，我们将更详细的学习不同的选择器组。

元素选择器，类选择器和ID选择器

该组包括针对HTML元素(比如 <h1>)的选择器

1
1 | h1 {}

它还包括一个针对类的选择器

1
1 | .box {}

或者针对ID的选择器

1
1 | #unique {}

属性选择器

这一组选择器为你提供了选择元素的另一种方法，基于元素上存在的某个特定属性。

1
1 | a[title] {}

甚至是基于元素特定属性特定值的选择

1
1 | a[href="https://example.com"] {}

伪类和伪元素

这组选择器包括伪类，用来为元素的特定状态来设置样式。例如：:hover 伪类仅在元素被鼠标悬停的时候才设置样式。

1
1 | a:hover {}

伪元素用来选择元素的特定一部分，而不是元素本身。举个例子，::first-line 总是会选中元素文本中的第一行（下面例子中的<p> 元素），就像使用了<span> 元素来包含了第一行匹配内容一样。

1
1 | p::first-line {}

关系选择器

最后一组选择器，通过将其他选择器组合在一起，来定位文档中的元素。下面的例子中通过使用连接符 > 来选择 <article> 元素的直系子元素 <p>

常见的基于关系的选择器

选择器 选择的元素
A E 元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E 元素A的任一子元素E(也就是直系后代)
E:first-child 任一是其父母结点的第一个子节点的元素E
B + E 元素B的任一下一个兄弟元素E
B ~ E B元素后面的拥有共同父元素的兄弟元素E

你还可以使用星号（*）来表示”任意元素“。

-------------The End-------------