Learn web development

简单选择器

在我们的第一篇选择器文章中，我们将学习“简单”选择器，之所以这么称呼它是因为它们基于元素的类型（或其 class 或 id）直接匹配文档的一个或多个元素。

类型选择器（元素选择器）

此选择器是直接的大小写不敏感匹配选择器名和指定的HTML元素名。这是选择所有指定类型的最简单方式。让我们一起看看下面这个例子:

这是HTML:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

这是样式表:

/* All p elements are red */
p {
  color: red;
}
/* All div elements are blue */
div {
  color: blue;
}

And we get this:

主动学习：选取不同的元素

在本次主动学习中，我们希望你尝试在简单的CSS规则上修改选择器，将样式渲染到例子中的不同元素上。你知道怎样写一个选择器将一组规则同时应用到多个元素上吗？

如果你犯了错误，你可以随时使用“重置”按钮。如果你有点不知所措，按下“显示”按钮可以看到可能的答案。

 

 

类选择器（Class selectors）

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。一下是一个简单的例子：

Here is some HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

A simple style sheet:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}
/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

And we get this result:

主动学习：处理多个类

For this active learning, we'd like you to try changing the class attributes on the paragraph elements so that you can apply multiple separate effects. Try applying a base-box class plus a role class (editor-note or warning), and optionally important if you want to give the box strong importance. Think about how this kind of rule set allows you to build up a modular system of styles.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

ID 选择器

The ID selector consists of a hash/pound symbol (#), followed by the ID name of a given element. Any element can have a unique ID name set with the id attribute. It is up to you what name you choose for the ID. It's the most efficient way to select a single element.

Important: An ID name must be unique in the document. Behaviors regarding duplicated IDs are unpredictable, for example in some browsers only the first instance is counted, and the rest are ignored.

Let's look at a quick example — here is some HTML:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

A simple style sheet:

#polite {
  font-family: cursive;
}
#rude {
  font-family: monospace;
  text-transform: uppercase;
}

And we get this as an output:

主动学习：依据不同 ID 分配获胜者的颜色

For this active learning, we'd like you to give the winner, second and third place in the competition an appropriate gold, silver and bronze color by giving CSS rules 2–4 appropriate selectors that select the relevant elements based on their ID.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

通用选择器（Universal selector）

The universal selector (*) is the ultimate joker. It allows selecting all elements in a page. As it is rarely useful to apply a style to every element on a page, it is often used in combination with other selectors (see Combinators below.)

Important: Careful when using the universal selector. As it applies to all elements, using it in large web pages can have a perceptible impact on performance: web pages can be displayed slower than expected. There are not many instances where you'd want to use this selector.

Now for an example; first some HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

And a simple style sheet:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Together, these give the following result:

下一篇文章

Well done for reaching the end of our first selectors tutorial! I hope you found your first play with selectors fun — now we've looked at the simple core selectors we'll use most commonly, let's start looking at some more advanced features, starting with 属性选择器。

 

文档标签和贡献者