css类选择器与id选择器
After basic element selectors (<body>, <h1>, <p>, etc), id is usually the first CSS selector encountered by web developers. id is easy to learn and apply, but it’s also brittle, as we shall see in a moment.
在基本元素选择器( <body> ， <h1> ， <p>等)之后， id通常是Web开发人员遇到的第一个CSS选择器 。 id易于学习和应用，但也很脆弱 ，我们稍后会看到。
Before we get there, we should review where id is used:
在到达那里之前，我们应该查看使用id位置：
In forms, as a means of associating form elements with their associated label, via the
forattribute在表单中，通过
for属性将表单元素与其关联的标签相关联的一种方法In anchors and anchor links, as a means of navigating long pages
在锚点和锚点链接中 ，作为导航长页面的一种方法
As a way of identifying a unique instance of an element to CSS and JavaScript.
作为一种识别CSS和JavaScript元素的唯一实例的方法。
Whatever their purpose, the rules for applying id to HTML tags are always the same: the id value must be a string of characters or numbers, without any spaces*. Most importantly, the value provided to the id attribute cannot be used for another element on the same HTML page. For example, it’s common to do this:
无论其目的是什么，将id应用于HTML标签的规则始终是相同的： id值必须是字符串或数字，没有空格* 。 最重要的是，提供给id属性的值不能用于同一HTML页面上的另一个元素。 例如，通常这样做：
<div id="wrapper"> … </div>As long as this id value only appears once on any page, you can address that particular div element via the following CSS:
只要此id值在任何页面上仅出现一次，您就可以通过以下CSS来解决该特定div元素：
div#wrapper { … }You can also use the shortcut #wrapper selector:
您还可以使用快捷方式#wrapper选择器：
#wrapper { … }Either is fine, but you should be aware that the first method takes higher priority over the second in stylesheets. I prefer to use the first, as it makes reading a stylesheet and mapping it to your HTML code a lot easier; whichever method you choose, be sure to use it consistently.
两种方法都可以，但是您应该注意，第一种方法比样式表中的第二种方法具有更高的优先级 。 我更喜欢使用第一个，因为它使阅读样式表并将其映射到HTML代码变得更加容易。 无论选择哪种方法，请务必始终使用。
It should also be noted the CSS associated with an id has a higher specificity than classes and other selectors: that is, if a single element is affected by the same property used in both an id and a class, the declaration in the id will take precedence.
还应该注意与相关CSS id已经比类和其他选择更高的特异性 ：那就是，如果一个元素是由于两种的使用相同的属性影响id和class ，在声明id将采取优先。
The strength of id selectors is also their central weakness: id CSS declarations are devoted to a single element on a page. (Note that the same element, with the same id value, could be used on different pages, and be influenced by the same CSS… the id just can’t appear twice on the same page). This means that the declarations can’t be reused or repurposed.
id选择器的强项也是它们的主要弱点： id CSS声明专用于页面上的单个元素。 (请注意，具有相同id值的相同元素可以在不同页面上使用，并且受相同CSS的影响… id不能在同一页面上出现两次)。 这意味着声明不能被重用或改变用途。
今天使用id (The Use of id Today)
Modern web development has arguably sidelined the use of id: adjacent, nth-child and attribute selectors (particularly when paired with ARIA roles) have been determined to be far more powerful, adaptable and useful, while classes can be conjoined and repurposed. This is particularly true in HTML5, where specialized elements such as <header> have replaced generic div elements that need to be distinguished with different id values. When used haphazardly, id tends to create singular exceptions in CSS, which should be avoided as they create opportunities for visual inconsistency.
可以说，现代Web开发在使用id方面处于边缘状态： 相邻 ， nth-child和属性选择器(尤其是与ARIA角色配对时)已被确定具有更强大的功能，更强的适应性和更多的用途，而类可以联合和重新利用。 在HTML5中尤其如此，在HTML5中，诸如<header>类的专用元素已替换了需要使用不同id值进行区分的通用div元素。 当随意使用id时， id往往会在CSS中创建单个异常，因此应避免使用它们，因为它们会造成视觉上的不一致。
That being said, id is easy to understand and use, and they are often necessary, especially with JavaScript. While using the selector will lengthen your stylesheet code, it’s usually better to learn the long way around rather than going directly to more efficient but complex solutions, so id should remain in your arsenal of CSS techniques.
话虽如此， id易于理解和使用，并且它们通常是必需的，尤其是对于JavaScript 。 虽然使用选择器会延长样式表代码的时间，但通常最好还是长途学习，而不是直接使用更高效，更复杂的解决方案，因此id应该保留在您CSS技术库中。
翻译自: https://thenewcode.com/622/The-id-Selector-in-HTML-and-CSS
css类选择器与id选择器
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
