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

先决条件: 基本的计算机素养, 安装必备的软件 basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of How CSS works.
Objective: 要了解CSS选择器如何工作的细节.


In the last article we explained general CSS syntax and terminology in detail. To recap, selectors are one part of a CSS rule and come just before CSS declaration blocks.


Selectors can be divided into the following categories:

  • Simple selectors (简单选择器): Match one or more elements based on element type, class, or id.
  • Attribute selectors (属性选择器): Match one or more elements based on their attributes/attribute values.
  • Pseudo-classes (伪类选择器): Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.
  • Pseudo-elements (伪元素选择器): Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element.
  • Combinators (组合选择器): These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.
  • Multiple selectors (多样 选择器): Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.

Selectors article overview

The next four articles all explore different aspects of selectors — we've broken this information up because there is a lot of it, and we wanted to make it less intimidating and give you some clear points to take breaks mid-learning. The articles are as follows:

You are strongly advised to tackle simple selectors first, in case you miss any pertinent information.


 此页面的贡献者: xgqfrms-GitHub, funnyChinese, xuqisheng
 最后编辑者: xgqfrms-GitHub,