AtoZ CSS快速提示：何时使用ID选择器代码

Buying a SitePoint Premium membership will give you access to the full AtoZ: CSS series.

购买SitePoint Premium会员资格将使您可以访问完整的AtoZ：CSS系列 。

Loading the player…

正在加载播放器…

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. In this article I’ve added a new quick tip/lesson about the id Selector for you.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 在本文中，我为您添加了有关id选择器的新的快速提示/课程。

我是为id选择器 (I is for id Selector)

In the video for letter I, we looked at the id selector and how it factors into CSS. I also had a good rant about the issues with using id over class, both in terms of reusability and specificity.

在字母I的视频中，我们研究了id选择器以及它如何影响CSS。 就可重用性和特异性而言，我对在class上使用id的问题也很满意。

To balance the argument a little I should talk about when we should use ID and why.

为了使论点保持平衡，我应该讨论何时使用ID以及为什么使用ID。

为Javascript提供一个独特的钩子 (To provide a unique hook for Javascript)

This is a little outside the normal scope of CSS (although not if you believe the constant debate of whether or not we need CSS anymore) it’s a useful piece of advice none the less. The fastest and most direct way of interacting with an element with JavaScript is to target it by its id attribute.

这有点超出了CSS的正常范围(尽管如果您不相信我们是否需要CSS的持续争论 )，这仍然是一条有用的建议。 使用JavaScript与元素进行交互的最快，最直接的方法是通过其id属性来对其进行定位。

提供目标锚标签进行导航 (To provide targeted anchor tags for navigation)

ID’s can be used on a single page for navigation by setting the href in an anchor tag to the id. Check out this example that allows you to navigate easily to different chapters on the page.

通过将锚标记中的href设置为id可以在单个页面上使用ID进行导航。 查看此示例，该示例使您可以轻松导航到页面上的不同章节。

See the Pen ORyGLa by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint( @SitePoint )提供的Pen ORyGLa 。

用于将表单输入与其标签链接 (For linking form inputs with their labels)

When building forms, we can link the label of a particular input by the for attribute on the label with the corresponding id attribute of the input. This means that clicking on the label will focus a text input field or toggle the state of checkboxes or radio buttons.

当建筑形式，我们可以链接label特定的input通过for属性上label与相应的id输入的属性。 这意味着单击标签将聚焦文本输入字段或切换复选框或单选按钮的状态。

And, finally, here’s one last tip about using ID’s: a valid id cannot start with a number and must be at least one character long.

最后，这是有关使用ID的最后一条提示：有效的id不能以数字开头，并且必须至少一个字符长。

翻译自: https://www.sitepoint.com/atoz-css-quick-tip-id-selector/