【CSS Master】选择器四种基本类型

理解选择器是编写可维护、可扩展的 CSS 的关键，选择器是 CSS 规则与元素匹配的机制，有很多方法可以做到这一点，其中的大多数都很熟悉。如元素类型、类名、ID 和属性选择器，都得到了很好的支持和广泛的使用。

在本文中，将首先回顾选择器的类型。然后，我们将研究当前浏览器的 CSS 选择器，重点关注由选择器级别3和选择器级别4规范定义的新选择器。

选择器可以分为四种基本类型：简单、复合、组合和复杂。

简单选择器

简单选择器是最古老的 CSS 选择器形式，并且可能是最常用的类型。简单选择器 为匹配元素指定单个条件。通用选择器（*）是一个简单的选择器。类型（或标签）选择器，如 p 和 伪元素选择器，如 ::first-letter 。属性选择器，如 [hidden] ，类选择器 .message-error 和 ID 选择器（如 #masthead）也属于这个类别。

复合选择器

复合选择器，如 p:last-child 或者 .message.error，是一系列简单的选择器，它们反映了在将规则应用于元素时要满足的一组同时发生的条件。换句话说 .message.error 将匹配 <div class="message error"> ，但不匹配 <div class="message"> 或 <div class="error"> 。

复合选择器是由两个或多个简单选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

组合选择器

组合选择器，表示元素之间的关系，有以下四种：

• 后代组合，如 article p，定义标签 article 里面的 p 的样式；

• 子组合 > ，如 .sidebar > h2，定义 .sidebar 的子元素 h2 的样式；

• 相邻兄弟组合 + ，如 ul + p
  

• 一般兄弟组合 ~，如 p ~ figure
  

当符合组合选择器表示的条件时，规则将应用于组合器选择器中最右侧的元素，后面将详细介绍组合选择器。

复杂选择器

复杂选择器由一个或多个由组合选择器分隔的复合选择器组成，如 ul:not(.square) > a[rel=external] 。

选择器可以通过逗号将它们分隔成选择器列表，选择器列表对匹配列表中任何选择器的元素应用样式。例如，规则 article,div {padding: 20px;} 表示同时定义了 <article> 和 <div> 标签的样式 padding 属性为 20px。

了解你正在使用哪种选择器将有助于掌握 CSS 中更令人困惑的特征：特异性。保持低特异性可以增加 CSS 规则的可重用性。如选择器 #menu > .pop-open 意味着只能当它是 #menu 的直接后代时

才能使用 .pop-open 规则。

完