CSS选择器
翻译：
CSS 语法和选择器
CSS 语法
CSS 规则集由选择器和声明块构成：
选择器指向你想要修改其样式的 HTML 元素。
声明块包含一个或多个由分号隔开的声明。
每一个声明包含一个 CSS 属性和一个值，由冒号隔开。
CSS 声明总是以分号结束，声明块使用大括号包裹。
在以下示例中，所有的 <p> 元素将是以红色字体居中的样式显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Syntax</title>
<style type="text/css">
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
CSS 选择器
CSS 选择器是根据元素的名称、id、class、属性等等来“查找”（或选择）HTML 元素的。
元素选择器
元素选择器是基于元素名称（element name）来选择元素的。
你可以在一个页面中选择所有的 <p> 元素，如下所示（在本例中，所有的 <p> 元素将是以红色字体居中的样式显示）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Syntax</title>
<style type="text/css">
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
id 选择器
id 选择器是根据 HTML 元素的 id 属性来选择具体的元素。
在一个页面中，元素的 id 值应该是唯一的， 因此，id 选择器用以选择一个唯一元素！
使用具体的 id 来选择元素，是以 # 号作为前缀，其后紧跟 id 值。
下面的样式规则将作用于 id 值为 para1 的元素：
#para1 {
text-align: center;
color: red;
}
| 注意：id 值不能以数字开头！ |
class 选择器
class 选择器是根据具体的 class 属性来选择元素的。
使用具体的 class 来选择元素，是以 . 号作为前缀，其后紧跟 class 值。
在以下示例中，所有以 class 值为 center 的元素都将以红色字体居中的样式显示：
.center {
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Syntax</title>
<style type="text/css">
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>你也可以通过 class 明确出将会受影响的具体的 HTML 元素。
在以下示例中，只有那些以 class 值为 center 的 <p> 元素会以红色字体居中的样式显示：
p.center {
text-align: center;
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Syntax</title>
<style type="text/css">
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>HTML 元素也可以包含多个 class 值。
在以下示例中，基于 class="center"和class="large"来显示 <p> 元素的相应式样：
<p class="center large">This paragraph refers to two classes.</p><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Syntax</title>
<style type="text/css">
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>| 注意：class 值不能以数字开头！ |
组选择器
如果你对多个元素有相同的样式定义，如下所示：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}将选择器归类以简化代码会是更好的做法。
在将选择器归类时，我们使用 , 号将它们隔开。
在以下示例中，我们将上述代码中的选择器归类：
h1, h2, p {
text-align: center;
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Syntax</title>
<style type="text/css">
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>