Type, class, and ID selectors

 

在本课程中,我们将介绍可用的最简单的选择器,您可能会在工作中使用最多的选择器.

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选择器,我们可以将CSS应用于文档.

Type selectors

类型选择器有时称为标记名选择器元素选择器 ,因为它选择了文档中的HTML标记/元素. 在下面的示例中,我们使用了span,em和strong选择器. 因此,将设置<span><em><strong>元素的所有实例.

尝试添加CSS规则以选择<h1>元素并将其颜色更改为蓝色.

The universal selector

通用选择器用星号( * )表示,并选择文档中的所有内容(例如,如果父元素与另一个元素和后代组合器链接在一起,则在父元素内部). 在以下示例中,我们使用通用选择器删除所有元素上的边距. 这意味着,浏览器没有添加默认样式(将标题和段落之间留有空白),而是将所有内容紧密结合在一起,我们无法轻松看到不同的段落.

有时可以在"重置样式表"中看到这种行为,该样式表会删除所有浏览器样式. 这些在某一时刻非常受欢迎,但是如果删除所有样式,通常意味着您必须将所有内容放回去! 因此,我们倾向于谨慎地使用通用选择器,以处理非常特殊的情况,例如下面概述的情况.

Using the universal selector to make your selectors easier to read

通用选择器的一种用法是使选择器更易于阅读,并且在执行工作时更加明显. 例如,如果我想选择任何<article>元素的第一个子元素,无论它是什么元素,并使其变为粗体,我都可以使用:first-child选择器,我们将在上一节的课程中详细了解伪类和伪元素 ,作为后代选择器以及<article>元素选择器:

article :first-child {

}

但是,这可能与article:first-child混淆,它将选择任何<article>元素作为另一个元素的第一个子元素.

为了避免这种混淆,我们可以将通用选择器添加到:first-child选择器中,因此很明显选择器在做什么. 它选择的任何元素都是<article>元素的第一个子元素:

article *:first-child { 

} 

Class selectors

类选择器以句号( . )开头,并将选择应用该类的文档中的所有内容. 在下面的实时示例中,我们创建了一个名为.highlight的类,并将其应用于文档中的多个位置. 应用了该类的所有元素都将突出显示.

Targeting classes on particular elements

您可以创建一个选择器,该选择器将针对应用了该类的特定元素. 在接下来的例子中,我们将突出一个<span>一类的highlight不同,以一个<h1>一类的标题highlight . 我们通过对要定位的元素使用类型选择器来完成此操作,并使用点将类附加到类之间,并且之间没有空格.

这种方法缩小了规则的范围,因为该规则仅适用于特定的元素和类组合. 因此,如果您决定将规则也应用于其他元素,则需要添加另一个选择器.

Target an element if it has more than one class applied

您可以将多个类应用于一个元素并分别定位它们,或者仅当选择器中的所有类都存在时才选择该元素. 在构建可以以不同方式在您的网站上组合的组件时,这将很有帮助.

在下面的示例中,我们有一个<div> ,其中包含一个注释. 当框具有一类notebox时,将应用灰色边框. 如果它也有warningdanger等级,我们将更改border-color .

通过将元素链接在一起并且它们之间没有空格,我们可以告诉浏览器我们只想匹配元素是否具有所有这些类.

ID Selectors

ID选择器以#而不是句号开头,但基本上以与类选择器相同的方式使用. 但是,每个文档只能使用一次ID. 它可以选择在其上设置了id的元素,并且可以在ID之前添加类型选择器,以仅在元素和ID都匹配时才将其作为目标. 在下面的示例中,您可以看到这两种用法:

注意 :正如我们在关于特异性的课程中所了解的那样,ID具有很高的特异性,并且会推翻大多数其他选择器. 这会使他们难以应对. 在大多数情况下,最好是在元素中添加一个类而不是使用ID,但是,如果使用ID是定位元素的唯一方法(也许是因为您无权访问标记,因此无法对其进行编辑),则这是可取的将工作.

In the next article

我们将通过查看属性选择器来继续探索选择 .

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