【C3】06 选择器概述

CSS中，选择器用来指定网页上我们想要样式化的HTML元素。

CSS选择器有很多种可供使用，所以在选择要样式化的元素时，我们可以做到很精细的地步。

本文和本文的子篇中，我们将会很详细地讲授选择器不同的使用方式，并了解它们的工作原理。

学习前提：	计算机的基本知识， 安装了基础软件，处理文件的基本知识，HTML基础（学习HTML介绍）以及对CSS工作方式的了解（学习CSS初步）
目标：	详细学习CSS选择器的工作方式。

---

 

选择器是啥？

你已经见过选择器了。CSS选择器是CSS规则的第一部分。

它是元素和其他项的一种组合形式，告诉了浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的那个。

元素被选择器所选择的话，就被叫做“选择器的对象”。

前面的文章中，你已经遇到过几种不同的选择器，了解到选择器可以以不同的方式指向文档，比如选择诸如h1的元素，或者是诸如.special的类。

CSS中，选择器由CSS选择器规范加以定义。就像是CSS的其他部分那样，它们需要浏览器的支持才能工作。

你会遇到的大多数选择器都是在三级选择器规范中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。

选择器列表

如果你有多于一个使用相同CSS的物件，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。

例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

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

h1, .special { 
  color: blue; 
} 

 

空格无论在逗号前面还是后面都可以，你可能还会发现如果每个选择器都另起一行，会更好读些。

h1, 
.special {
  color: blue; 
} 

 

在下面的实时示例中，试着把两个有ID声明的选择器组合起来。外观在组合起来以后应该还是一样的。

 

当你这样子给选择器放在一起时，如果任何一个选择器无效，那么整条规则都会被忽略。

在下面的示例中，无效的类选择器会被忽略，而h1仍会被样式化。

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

但是在被组合起来以后，在整个规则都被认为是失效的时候，无论是h1还是这个类都不会被样式化。

h1, ..special { 
  color: blue; 
} 

---

 

选择器的种类

有几组不同的选择器，知道了需要哪种选择器的话，你会更容易找到做事时所需的正确工具。

在本文的子篇中，我们将会来更详细地看下不同种类的选择器。

类型、类和ID选择器

这个选择器组包含的选择器，指向了例如一个<h1>的HTML元素

h1 { }

它也包含了指向一个类的选择器：

.box { }

或者，一个ID：

#unique { }

标签属性选择器

这组选择器给了你根据一个元素上的某个标签属性的存否以选择元素的不同方式：

a[title] { }

 

或者甚至根据一个有特定值的标签属性是否存在，来做选择：

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

伪类与伪元素

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类就只会在鼠标指针悬浮到一个元素上的时候选择这个元素：

a:hover { }

它还包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line总是会选择一个元素（下面的情况中是<p>）中的第一行，表现得就像是一个<span>包在了第一个被格式化的行外面，然后<span>被选中了。

p::first-line { }

运算符

最后一组选择器将其他选择器组合起来，以图指向我们的文档里的选择器。下面的示例用子元素运算符（>）选择了<article>元素的初代子元素。

article > p { }

接下来要做的事情

你可以看下下面的选择器参考表，可以获得到这个学习章节——或者总体来说是MDN上——的各种选择器的直接链接；

你也可以继续下去，开始你的了解类型、类和ID选择器的旅程。

 上一页 Overview: Building blocks下一页 

 

---

 

选择器参考表

下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。

我还加上了一个能查看浏览器对每个选择器的支持信息的MDN页面链接。

你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验CSS的时候。

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