我们得到这样一个结果:

例：处理多个类

html代码：

<p class="base-box warning important">My first paragraph.</p>

<p class="base-box editor-note">My second paragraph.</p>

<p class="base-box ">My third paragraph</p>

css样式：

.base-box {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
  padding: 3px 3px 3px 7px;
}

.important {
  font-weight: bold;
}

.editor-note {
  background-color: #9999ff;
  border-left: 6px solid #333399;
}

.warning {
  background-color: #ff9999;
  border-left: 6px solid #993333;
}

页面效果：

ID 选择器

ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己选择的ID是什么。 这是选择单个元素的最有效的方式。

重要提示：一个ID名称必须在文件中是唯一的。关于重复ID的行为是不可预测的，比如在一些浏览器只是第一个实例计算，其余的将被忽略。

我们来看一个简单的例子 - 这是HTML：

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

这是样式表：

#polite {
  font-family: cursive;
}

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

而我们得到这个作为输出：

例：冠亚季军对应金银铜三色

基于相关ID的CSS选择器规则，使冠军、亚军、季军显示对应的金、银、铜三种颜色。

html代码：

<p id="first"><strong>Winner</strong>: Velma Victory</p>
<p id="second"><strong>2nd</strong>: Colin Contender</p>
<p id="third"><strong>3rd</strong>: Phoebe Player</p>

css样式：

p {
  text-transform: uppercase;
  padding: 5px;
}

#first {
  background-color: goldenrod;
}

#second {
  background-color: silver;
}

#third {
  background-color: #CD7F32;
}

页面效果如图：

通用选择器

通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用(参考下面 组合）

重要提示：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。大多数情况下，你都不会使用这个选择器。

例如，这是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>

这是样式表：

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

组合在一起，会得到这样的结果：

另：通用（通配符*）选择器还常见于用来消除默认样式，一 般是消除默认的外边距和内边距。因为默认样式比较丑且有可能影响到css后的一些布局。

如以下css代码也不算少见:

* {
  margin: 0;
  padding: 0:
}

简单（基本）选择器总结

简单（基本）选择器包含：

• 1.元素（标签）选择器（共性）
  • 元素选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，而且选中的是页面上所有的，而不是单独的某一个，所以说它具有的是 "共性" 而不是 ”特性“。
• 2.ID选择器（#）
  • 同一个页面中id不要有重复（规范）；
  • 任何的标签元素都可以额外设置ID；
  • ID命名要规范（字母，数字，下划线），大小写敏感（严格区分大小写）；
• 3.类选择器（class）
  • 所谓类就是class，class与id非常相似；
  • 同样是任何的标签元素都可以添加上类名，不同于ID是不同标识，class是可以重复相同的命名；
  • 相同的类名，用于替元素，对象归类；
  • 同一个标签中可以携带多个类，分别用空格隔开。
  • 每个类尽可能的小，有公共（共有属性）的概念，能够让更多的标签使用上，减少重复代码（css样式）；
  • 玩好了类，等于玩好了2分之1css。
  • 相比使用id，要尽可能的使用class，因为id一般是用于Js当选择的，而class用于css当选择居多。

属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的 属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。

存在和值（Presence and value）属性选择器

这些属性选择器尝试匹配精确的属性值：

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
• [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

让我们看一个以下面的HTML代码片段为例：