MDN’s new design is in Beta! A sneak peek:


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




<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:





类选择器(Class selectors)

The class selector consists of a dot, '.', followed by a class name. A class name is any value without spaces put within an HTML class attribute. It is up to you to choose a name for the class. It is also worth knowing that multiple elements in a document can have the same class value and a single element can have multiple class names separated by white space. Here's a quick example:

Here is some HTML:

  <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>

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:

  <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>

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 属性选择器


 最后编辑者: sahala318,