CSS中,选择器用于定位我们想要样式化的网页HTML 元素。各种各样可用的CSS选择器允许我们精确选择要样式化的元素。在接下来的几篇文章中,我们将详细介绍不同类型的选择器,看看它们是如何工作的。

前提 基本的计算机使用能力,已安装基本的软件文件处理的基本知识,以及 HTML 基础 (学习 HTML入门),以及CSS 如何工作的概念。
目标: 详细学习 CSS 选择器如何工作

基础

在上篇文章中我们我们总的详细介绍了 CSS 语法和术语 。简而言之,选择器是 CSS 规则的一部分且位于 CSS 声明块前。

不同种类的CSS选择器:

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

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

选择器文章概览

接下来的四篇文章都探索了选择器的不同方面 —— 由于选择器有太多知识点,故我们已把这些知识打破,我们希望这能使它不那么吓人,并且我们给出一些明确的要点来使你轻松学习。文章如下:

为防止你遗漏任何相关信息,强烈建议你首先学习简单选择器

文档标签和贡献者