我想大家一定发现了,我们目前所掌握的选择器局限性太大。每一次选择,页面中所有相同的元素全都跟着变化。显然我们需要更灵活的选择方式,那么从这一章开始,我们来认识一些选择器。

a {
  /* 这是我们学过的,通过标签名,选择元素 */
}

除了用来辅助说明的伪类,我们目前只学了上面一种选择器。不过,我们增加一些组合变换的话,也能够玩出好多花样来:

后代选择器

p a {
  /* 两个选择器,中间空格 */
}

现在我把两个选择器按顺序写下来,中间用空格分隔,它表示什么呢?所有在段落中的链接。如果这个链接不在段落中,那它就不符合这个选择器。

所以说这种方法选择的是 ,p 元素的所有后代元素中,符合 a 选择器的元素。那么什么是后代元素,这个我们在第二十四章 论论辈分已经讲过了。

子元素选择器

上面的后代选择器,包含的是所有后代,不管是孙子还是重孙子,全都算上了。而子元素选择器,则被限制为只在子元素中查找,不是直接子元素,就不看了。

p>a {
  /* 两个选择器,中间 > */
}

这时候 > 前后的空格可以有也可以没有。

多个选择器

有时候我们几种元素需要设定的样式是一样的,如果为每一种元素都写一遍这些代码,就会比较麻烦,而且以后需要修改,也会变得非常痛苦,所以我们可以像下面这样写:

p,
a {
  /* 两个选择器,中间逗号 */
}

这表示两个选择器是并列关系,比如上面,它既对段落应用这些样式,又对链接应用这些样式,于是就避免了把相同的样式写两遍的尴尬。逗号后面可以是空格,也可以换行,当然也可以不加空白。不过一般情况下,我们都用空白来分隔一下,这样便于阅读。

后代的选择我们会了,那么父辈元素如何选择呢?CSS 无法做到父辈元素的选择[1],因为一般情况下也不需要。

选择所有元素

* 代表任何元素。这就是一个通配符,有点代表一切的感觉。

* {
  /* 这就是文档内的所有元素 */
}
p * {
  /* 段落的所有后代元素 */
}
p>* {
  /* 段落的所有直接子元素 */
}

到这里我们就算完成了对 CSS 的初步认识。我们会了一些属性,了解了一些基本的概念,更重要的,对于 CSS 有了一个比较直观的印象。

但是仅凭我们现在所学这些,好像并不能做什么复杂的事情,可能最多也就是把一篇文章的格式弄得好看一些吧。这距离书写漂亮页面的目标还有很大一段距离,不过不要着急,从下一章开始,我们就要逐渐接触 CSS 强大的一面了。

【本章助记卡片:卡片 for 第四十三章

>注释 1: CSS 的渲染顺序和文档加载顺序相同,由前到后,从外到里,这样可以随着内容的加载同步渲染。如果支持父元素选择器,那么里面的内容会反过来影响外面,也就是让已渲染内容发生变化,就重复劳动,降低效率了。

正常情况几乎不会有这种需要,或者可以通过变通来实现。JavaScript 可以实现父元素的选择,但是一般 JavaScript 都要在文档加载完成之后再运行。