CSS:Getting Started:Selectors
From MDC
本页面告诉你如何选择性的应用样式，及不同选择符的优先级区别。
我们将在示例文档中添加一些属性，并在样式表中使用这些属性。
[编辑] 资料: 选择符
CSS使用专门的术语描述CSS语言。 在指南前面部分，我们创建了如下样式:
strong {color: red;}
在CSS术语中，我们把上面这一行叫做“规则”。上面这条规则从strong开始，它是一个"选择符"。它指出这条“规则”应用于DOM中哪个元素。
| 大括号中的部分是“声明”。
关键字 同一声明中，属性值与属性值之间使用分号分隔。
|
在教程的这个页面中，会让你了解更多可用于CSS规则的选择符。 此外对于标签名，你可以将它们作为选择符，并为其指定属性值。让你指定的规则更加有针对性。
CSS中有两个属性情况比较特殊，他们是class 和 id。
在标签中使用class属性为标签指定一个类名。类的名称完全由你自由定义。
在样式表中，把类名作为选择符，只要在类名前输入一个句号即可。
在标签中使用id属性，为标签分配一个id。id的名称由你决定。在文档中id名必须是唯一的。
在样式表中，把id作为选择符，只要在id名称前输入一个#号即可。
下面的HTML标签同时具有class属性和id属性：
<P class="key" id="principal"> id 在样式表中，这个规则让所有使用
.key {color: green;}
这条规则将id为
#principal {font-weight: bolder;}
|
If more than one rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector. An id selector is more specific than a class selector, which in turn is more specific than a tag selector.
如果有多条规则应用于一个元素，并指定了相同的属性，CSS会给指定得更详细的选择符优先级。
| 你也可以组合选择符，创建更有针对性的选择符。
例如，选择符 对于 在本教程后面的页面中 (Tables) 还有关于基于相互关系的复杂选择符的资料。 关于选择符完整的资料，请参见CSS规范中的 Selectors 。 |
If the stylesheet has conflicting rules and they are equally specific, then CSS gives priority to the rule that is later in the stylesheet.
如果样式表中的规则发生冲突，
当你遇到规则冲突的问题，可以尝试把其中一条规则指定得更加明确，以便让它获得优先权。如果问题还是无法解决，可以尝试把其中一条规则移到样式的后面，让它获得优先权。
[编辑] 实践：使用类和id选择符
编辑你的HTML文件，复制并粘贴下面以粗体显示的段落到文件中。然后为第一个段落添加 id 和类属性，为第二个段落添加一个id。还有一个选择，再次复制并粘贴整个文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Sample document</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<p id="first">
<strong class="carrot">C</strong>ascading
<strong class="spinach">S</strong>tyle
<strong class="spinach">S</strong>heets
</P>
<P id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
现在开始编辑 CSS 文件，使用下面内容替换原来 CSS 文件中所有内容：
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
刷新浏览器显示如下结果：
| Cascading Style Sheets |
| Cascading Style Sheets |
尝试重新调整规则在CSS文件中的顺序，可以发现改变顺序对结果的显示并没有影响。
类选择符.carrto和.spinach的优先级高于标签选择符strong的优先级。
id选择符#first的优先级在类和标签选择符之上。
不改变HTML文件，在CSS 文件中添加一条规则，不改变任何首字母的颜色，然后让第二段中除首字母以外文本变为蓝色：
更改刚才添加的规则（不要更改任何其它规则），让第一段的文本也变成蓝色：
|
[编辑] 接下来的内容?
如果你对本页面内容感到难以理解，或如果你有其它的意见，请提交到[[Talk:CSS:Getting Started:Selectors|讨论] 页面。
我们的示例样式表开始看起有些密集和复杂。 在下个页面我们将介绍使用CSS更容易阅读的方法： 具有可读性的 CSS