CSS selectors

 

CSS中 ,选择器用于定位我们要设置样式的网页上的HTML元素. 有多种CSS选择器可供选择,在选择要设置样式的元素时可以实现细粒度的精度. 在本文及其子文章中,我们将详细介绍各种类型,并了解它们的工作原理.

Prerequisites: Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective: 了解CSS选择器的详细工作方式.

What is a selector?

您已经遇到选择器. CSS选择器是CSS规则的第一部分. 它是元素和其他术语的一种模式,它告诉浏览器应选择哪些HTML元素以将规则内的CSS属性值应用于它们. 选择器选择的一个或多个元素称为选择器的主题 .

Some code with the h1 highlighted.

在较早的文章中,您遇到了一些不同的选择器,并了解到有一些选择器以不同的方式针对文档—例如,通过选择诸如h1类的元素或诸如.special类的类.

在CSS中,选择器是在CSS选择器规范中定义的; 像CSS的其他任何部分一样,它们需要在浏览器中获得支持才能正常工作. 您将遇到的大多数选择器是在Level 3 Selectors规范 (这是一个成熟的规范)中定义的,因此您会发现这些选择器具有出色的浏览器支持.

Selector lists

如果您有多个使用同一CSS的东西,那么可以将单个选择器组合到一个选择器列表中,以便将规则应用于所有单个选择器. 例如,如果我为h1使用相同的CSS以及.special类,则可以将其编写为两个单独的规则.

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

通过在它们之间添加逗号,我也可以将它们组合到选择器列表中.

h1, .special { 
  color: blue; 
} 

空格在逗号之前或之后有效. 如果每个选择符都在换行符上,您可能还会发现它们更具可读性.

h1, 
.special {
  color: blue; 
} 

在下面的实时示例中,尝试结合使用两个具有相同声明的选择器. 合并后,视觉显示应相同.

 

以这种方式对选择器进行分组时,如果任何选择器无效,则整个规则将被忽略.

在下面的示例中,无效的类选择器规则将被忽略,而h1仍将被设置样式.

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

但是,当组合在一起时, h1或类都不会被设置样式,因为整个规则都被视为无效.

h1, ..special { 
  color: blue; 
} 

Types of selectors

选择器有几种不同的分组,知道您可能需要哪种选择器类型将有助于您找到适合该工作的工具. 在本文的子文章中,我们将更详细地介绍不同的选择器组.

Type, class, and ID selectors

该组包括针对HTML元素(例如<h1>选择器.

h1 { }

它还包括针对一个类的选择器:

.box { }

或者,ID:

#unique { }

Attribute selectors

这组选择器为您提供了基于元素上某个属性的存在来选择元素的不同方法:

a[title] { }

甚至根据具有特定值的属性的存在进行选择:

a[href="https://example.com"] { }

Pseudo-classes and pseudo-elements

这组选择器包括伪类,它们为元素的某些状态设置样式. 例如, :hover伪类仅在将鼠标指针悬停在元素上时才选择该元素:

a:hover { }

它还包括伪元素,这些伪元素选择元素的某个部分而不是元素本身. 例如, ::first-line总是选择元素内文本的第一行(在以下情况下为<p> ),就好像<span>环绕在第一条格式化行之后然后被选择一样.

p::first-line { }

Combinators

最后一组选择器将其他选择器组合在一起,以定位文档中的元素. 以下示例使用子组合器( > )选择是<article>元素的直接子项的段落:

article > p { }

Next steps

您可以查看下面的选择器参考表,以直接链接到本学习部分或MDN上各种类型的选择器,或者继续了解类型,类和ID选择器以开始您的旅程.

Reference table of selectors

下表概述了可使用的选择器,并提供了指向本指南页面的链接,这些链接将向您展示如何使用每种选择器. 我还为每个选择器都提供了指向MDN页面的链接,您可以在其中检查浏览器支持信息. 当您稍后需要在材料中查找选择器时,或者在尝试使用CSS时,可以将其用作参考.

Selector Example 学习CSS教程
Type selector h1 {  } Type selectors
Universal selector * {  } The universal selector
Class selector .box {  } Class selectors
id selector #unique { } ID selectors
Attribute selector a[title] {  } Attribute selectors
Pseudo-class selectors p:first-child { } Pseudo-classes
Pseudo-element selectors p::first-line { } Pseudo-elements
Descendant combinator article p Descendant combinator
Child combinator article > p Child combinator
Adjacent sibling combinator h1 + p Adjacent sibling
General sibling combinator h1 ~ p General sibling

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS