翻译：
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>CSS选择器
原文地址：http://www.cnblogs.com/zzmb/p/7754659.html