1. 首页
  2. 问答
  3. 识别CSS中用于样式和定位的html元素

识别CSS中用于样式和定位的html元素

2012-03-20 56 views
1

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

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

在此先感谢，当我们需要的不仅仅是一类更具体的选择

来源

2012-03-20 user793468

回答

1

由于只有一个元素可以有给定的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有助于降低维护成本，因为您不必在一堆不同的地方重复相同的样式信息。它只能做到这一点，如果你能想出一个规则，可以在各种不同的情况下匹配你想要的元素。

来源

2012-03-20 22:01:48 StriplingWarrior

1

为什么我们需要各种选择器（而不仅仅是一个，使用如你所建议的ID）的原因是它们在不同的场景中很有用。

  1. 元素选择器（input，div，span）。当我们想要为某种类型的所有元素应用某种样式时，这种方式非常有用，独立于其类或id。

  2. Id-selector。当您想将样式应用于单个特定元素时非常有用。

  3. 类选择器。当您想将样式应用于多个元素时非常有用，不管它们是什么类型的元素（div，span，input）。通过类，还可以通过向同一元素添加几个类来组合各种类的样式。

如果您只使用ID选择器，那么您将违反DRY，因为您将不得不重复大量的CSS。假设您有五个输入元素，所有元素都应该具有相同的样式。然后，您就必须明确地写在ID选择器的每一个元素：

#input1, #input2, #input3 
{ 
/* Some styling */ 
}

如果您以后需要添加其他输入，你将不得不修改你的CSS，并为输入添加一个新的选择，使样式也适用于该元素。在这种情况下，它会更好，要么使用可应用于所有输入一个类。或者使用元素选择，只是施用定型于所有输入。就像它的护照号码元素的ID的

/* 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 */ 
}

来源

2012-03-20 22:03:29

1

的想法 - 这是唯一的一个元素，可以用来仅适用造型吧。

  • 每个元素只能有一个ID（如<div id="id"></div>）
  • 每个页面只能有一个元素与ID

认为像其国籍元素的类 - 它可能与共享很多其他元素。因此它不是唯一的。

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

在做大型项目，你可能要一个标准内容的包装，里面是每次不同的东西。在这种情况下，包装会被“类”和它里面的东西通过“ID”来识别。

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

  • 元素 - >施加的通用CSS，例如用于所有“的div”
  • 类 - >施加的通用CSS，至该类
  • 标识的所有元素 - >应用特定的CSS，一个元素
  • 联样式 - >应用特定的CSS，使用style =“”标签元素的标签内

来源

2012-03-20 22:04:36 jacktheripper

相关问题

 相关问题