Question

我知道我们可以在CSS中为文本框，文本区域，按钮等提供样式和定位，使用“Class”，“Id”等属性来识别元素。

我的问题是：我们如何决定何时使用特定属性？使用一个优于其他（class vs Id vs other）是否有任何优势？为什么我们有多种识别元素的方法？为什么不用一种标准方法来识别，比如说“Id”？

提前致谢

Answer 1

当我们想要一个比一个类更具体的选择器时，使用

ID。一个类可以应用于许多元素，一个ID只应用于一个（一个唯一的ID）。 ID是最具体的，并且（取决于您的选择器）优先于类。我建议阅读CSS优先权：https://www.google.ca/?q=css%20precedence

Answer 2

您无法在任何地方使用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有助于降低维护成本，因为您不必在许多不同的地方重复相同的样式信息。它只能在你想出一条规则时才能做到这一点，这条规则可以在各种不同情况下匹配你想要的元素。

Answer 3

我们需要各种选择器（而不仅仅是一个，使用你建议的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 */
}

Answer 4

将元素的ID视为护照编号 - 它对于一个元素是唯一的，并且可以用于仅对其应用样式。

每个元素只能有一个ID（例如<div id="id"></div>）
每个页面只能包含一个具有该ID的元素

将元素的类视为其国籍 - 它可能与许多其他元素共享。因此它不是独一无二的。

您可以在多个元素上使用相同的类。（例如<div class="class"></div> <div class="class"></div>）
您可以在同一元素上使用多个类。（例如<div class="classone classtwo"></div>）

在执行大型项目时，您可能需要一个标准内容包装器，每次都包含不同的内容。在这种情况下，包装器将由'class'标识，其中的内容由'id'标识。

应用多个CSS实例时，优先顺序如下：

元素 - ＆gt;将通用CSS应用于所有'divs'
类 - ＆gt;将通用CSS应用于该类的所有元素
Id - ＆gt;将特定的CSS应用于一个元素
内联样式 - ＆gt;使用元素标签中的style =“”标签应用特定的CSS

在CSS中识别html元素以进行样式和定位

4 个答案: