【发布时间】：2012-03-21 06:10:04
【问题描述】：
我知道我们可以在 CSS 中为文本框、文本区域、按钮等提供样式和定位，使用 "Class" 、 "Id" 等属性来识别元素。
我的问题是： 我们如何决定何时使用特定属性？ 使用其中一个有什么优势（class vs Id vs other）？ 为什么我们有多种识别元素的方法？为什么没有一种标准的识别方式，比如“Id”？
提前致谢
【问题讨论】：
【发布时间】：2012-03-21 06:10:04
【问题描述】：
当我们想要一个比类更具体的选择器时使用 ID。一个类可以应用于许多元素，一个 ID 只能应用于一个（唯一的一个）。 ID 是最具体的，并且将（取决于您的选择器）优先于一个类。我建议阅读 CSS 优先级：https://www.google.ca/?q=css%20precedence
【讨论】：
您不能在任何地方都使用 ID，因为只允许一个元素具有给定的 ID，因此如果要将相同的样式应用于五个不同的元素，则必须创建五个不同的规则，这是没有意义的。
通常最好为您希望某些元素类型一般（链接、列表、表格等）的显示方式使用基线定义。然后，如果您希望这些元素具有不同样式的特定位置，请将类应用于元素以标识该位置（例如“导航栏”），并使用自定义样式来修改该区域内元素的行为：
li {/* How you generally want list items to appear */}
.navigation-bar li {/* How you want list items to appear in the nav bar */}
由于样式“级联”的方式，第二个规则设置的属性将覆盖第一个规则设置的属性，因为第二个选择器更具体。
至于为什么有多种方法可以选择一个元素，这是因为它们几乎都在某一时刻很有用。 CSS 有助于降低维护成本，因为您不必在一堆不同的地方重复相同的样式信息。只有当你能想出一个规则，使得在各种不同的情况下匹配你想要的元素成为可能时，它才能做到这一点。
【讨论】：
我们需要各种选择器（而不仅仅是一个，像你建议的那样使用 ID）的原因是它们在不同的场景中很有用。
元素选择器（输入、div、span）。当我们想为某种类型的所有元素应用某种样式时很有用，独立于它的类或 id。
ID 选择器。当您想将样式应用于单个特定元素时很有用。
类选择器。当您想将样式应用于多个元素时很有用，与它们是什么类型的元素（div、span、input）无关。使用类，您还可以通过向同一个元素添加多个类来组合各种类的样式。
如果您只使用 ID 选择器，那么您将违反 DRY，因为您将不得不重复大量 CSS。假设您有五个输入元素，它们都应该应用相同的样式。然后，您必须为每个元素显式编写 ID 选择器：
#input1, #input2, #input3
{
/* Some styling */
}
如果您以后需要添加另一个输入，则必须修改 CSS 并为该输入添加一个新选择器，以便样式也应用于该元素。在这种情况下，最好使用可以应用于所有输入的类。或者使用元素选择器并将样式应用于所有输入。
/* Either of these would probably be more suitable */
.inputs {
/* Use a class to style the inputs */
}
input {
/* Apply styling to all elements of type input */
}
【讨论】：
将元素的 id 想象成它的护照号码 - 它对于一个元素是唯一的，并且只能用于对其应用样式。
- 每个元素只能有一个 ID（例如
<div id="id"></div>） - 每个页面只能有一个具有该 ID 的元素
把一个元素的类想象成它的国籍——它可能与许多其他元素共享。因此它不是唯一的。
- 您可以在多个元素上使用同一个类。 （例如
<div class="class"></div> <div class="class"></div>） - 您可以在同一个元素上使用多个类。 （例如
<div class="classone classtwo"></div>）
在进行大型项目时，您可能需要一个标准的内容包装器，每次都包含不同的内容。在这种情况下，包装器将由“类”标识，其中的内容由“id”标识。
应用多个CSS实例时，优先顺序如下：
- 元素 -> 应用通用 CSS，例如应用于所有“div”
- 类 -> 将通用 CSS 应用于该类的所有元素
- Id -> 将特定 CSS 应用于一个元素
- 内联样式 -> 应用特定的 CSS，在元素标签中使用 style="" 标签
【讨论】：