阿嬷都看得懂的基础 CSS 选择器

小孩子才做选择，我全都要！ －民明书房《我那被限制住的想像》

昨天我们把重复的 CSS 样式收整在一起，然後再把所有想要套用这个样式的标签，都指定成 class = "gavagai"。

这样是看起来清爽多了，不过，我们该怎麽告诉浏览器，这些样式都属於叫作 gavagai 的这个分类呢？熟悉集合论的阿嬷会知道，我们使用花括弧 {} 来把一堆东西打包起来，也可以直接写出这堆东西都具备什麽性质。例如，我们可以定义人类这个分类：

人类 = {这样的东西 | 这个东西有两只脚 而且 这个东西没有长羽毛}

不过，在 CSS 当中的写法比较简单，我们在花括弧的前面加上这堆东西的类别名称 (class name)，再在类别名称前面加上半型句点 "."，然後在花括弧内写上属性，就可以罗！以昨天的 4 个区块为例，写起来会看起来像这样：

	.gavagai{
		margin:2px;
		height:100px; 
		width:100px; 
		background-color:red; 
		color:white; 
		text-align:center; 
		line-height:100px;
	}

为什麽我们需要在类别名称前面加上半型句号 "." 呢？因为 CSS 样式不只有类别 class 这种选择要把样式加到哪些标签的方式。想想看，除了类别以外，我们还有哪些把标签分堆的方式呢？没错，我们原本就有 p 标签啊、h1 标签啊、 span 标签、div 标签。因此，我们还有种把 CSS 样式指定到一堆标签的方式，也就是：

• 标签名称 (tag name)。使用标签名称时，前面不用加上任何符号，直接使用就可以了。例如，当我们想把所有 span 标签都指定文字为红色的样式时，就可以这样写：

	span{
		color: red;
	}

这时候，我们就会发现所有被 span 标签包起来的文字，都会变成红色罗！

由於这个放在花括弧前的分堆名称，无论是类别名称，或者标签名称，都可以将花括弧中的 CSS 样式应该指定给哪堆 HTML 标签，给选择出来，因此，这个分堆的名称格式，就称作「CSS 选择器」(CSS selector)，那麽，我们还有哪些常见好用的 CSS 选择器呢？

或许你会很意外，我们还可以指定标签的

• id喔！没错，我们可以给予 HTML 标签身份证字号！就像人类的身分证字号那样，给予 HTML 标签的 id 应该要是独一无二的。不过，即使我们发给 2 个以上的标签同样的 id，其实浏览器也不会爆炸，只是到时候自己会很不方便而已。使用 id 给定样式时，我们的 CSS 选择器格式，是在名称前面加上井字号 "#"。使用 id 给定的 html 和 css 分别是这样写：

	<div id="Logos"></div>

	#Logos{
		height:100px;
		width:100px;
		baclground-color:gold;
	}

最後，假使我们想要无差别地指定所有标签，该怎麽办呢？还好我们有

• 万用选择器 (universal selector)。既然是无差别地指定所有标签，当然也就不会有任何名称，而是使用星号 "*" 作为我们的万用字元。万用选择器写起来会是像这样的：

*{
	background-color: purple
}

这样，就会发现所有元件的背景颜色，都变成紫色罗！

不过，这些抽出来的 CSS 样式应该放在哪里呢？当然不是放在指定那个类别的 HTML 标签中，因为我们就是不想重复写行内样式，才把 CSS 样式另外用分类的方式拉出来写吧！可是，我们也不太可能把 CSS 样式写在 HTML 标签外，不然可能会被浏览器当成一般文字。那到底该怎麽办呢？

我们的策略，是另外用一种特殊的 HTML 标签来处理。这些特殊的 HTML 标签本身不会被渲染出来，而是告诉浏览器怎麽渲染这些元件。至於我们应该使用哪个标签，就留待明天介绍罗！

想一想：

1. CSS 选择器的功能是将标签分堆，这对於日後我们学习使用 JavaScript 操纵网页元件的时候，会有什麽帮助吗？
2. 各位阿嬷觉得上述这些基础的 CSS 选择器够用吗？还是会想要其他哪些选择器，帮助我们更灵活地将标签分堆呢？