翻译正在进行中。

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

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

基础

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

不同种类的CSS选择器:

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

  • 简单选择器(Simple selectors):通过元素类型、classid 匹配一个或多个元素。
  • 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。
  • 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。
  • 伪元素(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.

选择器文章概览

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

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

文档标签和贡献者

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