css类选择器与id选择器_CSS中的ID与类

css类选择器与id选择器

There are two main kinds of selectors in CSS: One is base selector like

CSS中有两种主要的选择器：一种是基本选择器，例如

h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red:

h1 ， h2 ， body ， 表或任何现有HTML标签。 例如，以下规则将所有段落（<p>元素）设置为红色：

p {color: #F00;}

Most of the time, we get confused about the differences between IDs with classes -- either failing to utilize the real purpose of each or simply using one instead of the other.  Let's think of an ID as you do with your own personal identification.  It is unique to you and is not shared with anyone else.  A class is different, in that there can be many people in a class, be it at school, in society, or wherever.  

大多数时候，我们对ID与类之间的区别感到困惑-要么没有利用每个ID的真实目的，要么只是简单地使用一个ID而不是另一个ID。 让我们想一想ID，就像您使用自己的

This translates to CSS where an ID can only be used once per page, whereas classes can be used an unlimited number of times.  An example could be Bar Code (class) and Serial Number (ID).

这可以转换为CSS，其中一个ID每页只能使用一次，而类可以无限次使用。 例如条形码（类）和序列号（ID）。

编号
(IDs
)

每个页面只能使用一次ID，它是元素的唯一标识符。 通常，ID用于任何唯一的页面元素，例如用户界面的标题，主导航，页脚或其他关键部分。

Applying an ID

套用编号

The most common way to apply an ID is to reference it in the (X)HTML using the id="name" attribute immediately after the opening tag within an element.  In the following, our two IDs are named highlight and default, respectively, and are applied to two paragraphs:

应用ID的最常见方法是在（X）HTML中使用id =“

<p id="pred">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>

#) character to denote that the rule is a unique ID. The hash is combined with the ID name to start the rule, followed by the property declarations:

＃ ）字符表示规则是唯一ID。 哈希与ID名称结合在一起以启动规则，然后是属性声明：

/* Define highlighted text */
#pred {color:#F00;}
/* Define default text */
#default {color:#333;}

Combining IDs with Selectors

将ID与选择器组合

Existing or new IDs can be combined with selectors in the style sheet to add further control.  In the following example, the base CSS defines all h2 headings as dark gray and 16 pixels in size:

可以将现有ID或新ID与样式表中的选择器结合使用，以添加更多控件。 在以下示例中，基本CSS将所有h2标题定义为深灰色，大小为16个像素：

/* Basic heading style */
h2 {
color:#333;
font-size:16px;
}

element#name

/* Adjust the color of h2 when used as a title */
h2#title {
color:#F00;
}

<h2 id="title">Title Of My Article</h2>

title is a unique identifier, so it cannot be used again within that template.  Any other instances of <h2> on the page will be rendered with the default styling.

title是唯一的标识符，因此不能在该模板中再次使用。 页面上<h2>的任何其他实例将使用默认样式呈现。

When to Use an ID

何时使用ID

Only one element on each page can be styled by each unique ID, and therefore IDs should be reserved for unique, single-use elements such as a header or sidebar, or the main navigation or page footer. This makes scanning your markup easier, as all ID attributes will denote unique content areas or special regions of the page, while also providing greater flexibility for more complex CSS application

每个页面上只有一个元素可以由每个唯一的ID设置样式，因此ID应该保留给唯一的，一次性使用的元素，例如标题或侧边栏，或主导航或页面页脚。 这使扫描标记更加容易，因为所有ID属性都将表示页面的唯一内容区域或特殊区域，同时还为更复杂CSS应用程序提供了更大的灵活性

When to Avoid Using an ID

何时避免使用ID

IDs must be avoided when there is more than one requirement for the CSS rule.  Do not use an ID for anything you are likely to multiply in the future, such as multiple images, link styles, or paragraphs where more than one will need to be styled a particular way.

如果CSS规则有多个要求，则必须避免使用ID。 不要将ID用于将来可能会增加的内容，例如多张图片，链接样式或需要用一种特定方式设置多个样式的段落。

类
(Class
)

每个页面上一个类可以使用无限次，这使得它非常灵活地应用CSS。 类将元素定义为属于组或可重用的对象或样式。 类可以在短期内解决问题，但可以为更复杂CSS设计提供较小的灵活性。

Applying Classes

申请课程

The most common way to apply a class is to reference it in the (X)HTML using a class="name" attribute of an element. As with our ID example, the two classes are named highlight (for red text) and default (for dark gray text):

应用类的最常见方法是使用元素的class =“ 属性在（X）HTML中对其进行引用。 与我们的ID示例一样，这两个类分别命名为Highlight（用于红色文本）和default（用于深灰色文本）：

<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>

.) character to denote the rule is a reusable class. The period is combined with the class name to start the rule, followed by the property declarations:

。 ）表示规则的字符是可重用的类。 句点与类名结合在一起以启动规则，然后是属性声明：

 /* Define highlight class */
.highlight {color:#F00;}
/* Define default class */
.default {color:#333;}

Combining IDs with Multiple Classes

将ID与多个类别结合

Classes are especially useful when you wish to have control over a number of elements. Consider the following drinks list from an HTML file:

当您希望控制多个元素时，类特别有用。 考虑以下HTML文件中的饮料清单：

<ul id="drinks">
<li class="alcohol">Beer</li>
<li class="alcohol">Spirits</li>
<li class="mixer">Cola</li>
<li class="mixer">Lemonade</li>
<li class="hot">Tea</li>
<li class="hot">Coffee</li>
</ul>

id="drinks" will not be used again on the page at any time, and that allows that particular list to be styled uniquely.  Note also that Beer and Spirits are within list elements defined with class="alcohol", Cola and Lemonade are within list elements defined with class="mixer", and finally Tea and Coffee are defined in list elements with class="hot".  This handling allows each drinks group to be treated individually.

id =“ drinks”不会在页面上再次使用，这将使该特定列表具有唯一的样式。 还请注意，Beer和Spirits在用class =“ alcohol”定义的列表元素内，可乐和Lemonade在用class =“ mixer”定义的列表元素内，最后Tea和Coffee在class =“ hot”的列表元素中定义。 这种处理方式允许每个饮料组分别进行处理。

The CSS declares that the default text for that list will be red, so any list items without a class attribute will default to red text:

CSS声明该列表的默认文本将为红色，因此所有没有class属性的列表项将默认为红色文本：

/* Drinks list styling */
ul#drinks {color:#F00;}

/* Define alcohol color */
.alcohol {color:#333;}
/* Define mixer color */
.mixer {color:#999;}
/* Define hot drinks color */
.hot {color:#CCC;}

   <li class="alcohol">Wine</li>

<li class =“ alcohol”>葡萄酒</ li>

Thus, a logical color key is established using simple CSS classes.

因此，使用简单CSS类可以建立逻辑颜色键。

Before adding a class to an element, be sure that the element needs it. Too often web designers overuse classes when the (X)HTML is already providing more than enough hooks for the CSS. Make sure that the element cannot be targeted using a descendant selector or other method before opting for a class. This will help keep your code lean and make future redesigning much easier.

在将类添加到元素之前，请确保该元素需要它。 当（X）HTML已经为CSS提供了足够多的钩子时，Web设计人员经常会过度使用类。 选择类之前，请确保不能使用后代选择器或其他方法将元素作为目标。 这将有助于保持代码精简，并使将来的重新设计变得更加容易。

Overriding Base Styling with Classes

用类覆盖基本样式

Here is an example of a base CSS rule that is being used to turn all paragraphs red by declaring all instances of paragraphs as red and adding a class rule to the CSS that will bleach out any element it is identified with by turning text light gray:

这是一个基本CSS规则的示例，该规则用于通过将所有段落实例声明为红色并向CSS添加一个类规则将所有段落变为红色，从而通过将文本变成浅灰色来漂白识别出的所有元素：

/* Default styling for paragraphs */
p {color:#F00;font-size:12px;}
/* Use this style to turn anything light gray */
.bleached {color:#CCC;}

bleached class, as in this (X)HTML:

漂白类，例如（X）HTML：

<p>This paragraph has red text.</p>
<p class=”bleached”>This paragraph has light gray text.</p>

Linking a Class Directly to an Element

将类直接链接到元素

In this example, the CSS is constructed with the class attached directly to the element in the form

在此示例中，构造了CSS的类直接以形式附加到元素上

    element.classname

and like before, it is referenced using the class="classname" format within the (X)HTML.

与以前一样，在（X）HTML中使用class =“ 格式对其进行引用。

/* Use this style to turn anything light gray */
.bleached {color:#CCC;}
/* Override the color of bleached when it identifies a paragraph */
p.bleached {color:#000;}

When to Use a Class

何时使用课程

As described previously, classes are a very flexible method for applying your CSS rules, and can be used again and again within a page. Use classes to control elements that belong to a group, for temporary items, and also to enhance the behavior of an ID.

如前所述，类是应用CSS规则的非常灵活的方法，可以在页面中一次又一次地使用。 使用类可控制属于组的元素，用于临时项，以及增强ID的行为。

When Not to Use a Class

何时不上课

It is not recommended that classes be used for main structural elements within a page, such as headers and main navigation, although they will work.  Doing so would decrease the flexibility of your design and make further customization difficult without overhaul or extra markup.  Also, be sure a class is needed, and make sure the element cannot be targeted by defining a rule for the existing (X)HTML before getting class-happy.  Remember:  A class is used for exceptions to normal styling, and not to define the standard.

不建议将类用于页面内的主要结构元素，例如标题和主导航，尽管它们可以工作。 这样做会降低设计的灵活性，并使进一步的定制变得困难，而无需进行大修或额外的标记。 另外，请确保需要一个类，并通过在为类感到高兴之前为现有（X）HTML定义规则来确保该元素无法定位。 请记住：类用于正常样式的异常，而不是用于定义标准。

Elements can have BOTH

元素可以同时具有

There is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a very good idea. Take for example the default markup for a WordPress comment list item:

没有什么可以阻止您在一个元素上同时拥有ID和Class。 实际上，这通常是一个非常好的主意。 以WordPress注释列表项的默认标记为例：

<li id="comment-27299" class="comment">

CSS doesn't care

CSS不在乎

Regarding CSS, there is nothing you can do with an ID that you can't do with a Class and vice-versa.  I remember when I was first learning CSS and I was having a problem, sometimes I would try and troubleshoot by switching around these values. Nope. CSS doesn't care.

关于CSS，与ID无关，与Class无关，

JavaScript cares

JavaScript关心

JavaScript people are already probably more in tune with the differences between classes and IDs. JavaScript depends on there being only one page element with any particular, or else the commonly used getElementById() function wouldn't be dependable.  For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built-in function of jQuery.  Notice how no such function exists for IDs.  It is not the responsibility of JavaScript to manipulate these values, it would cause more problems than it would be worth.  If an (X)HTML element does not need an ID, don't assign it one -- or at least, try to avoid it when possible.    

JavaScript人士可能已经对类和ID之间的差异更加了解。 JavaScript依赖于只有一个页面元素具有任何特殊性，否则常用的getElementById（）函数将不可靠。 对于熟悉jQuery的人，您知道在页面元素中添加和删除类非常容易。 它是jQuery的本机内置函数。 请注意，对于ID，没有这样的功能。 JavaScript并不是操纵这些值的责任，它会引起更多的问题，而不是值得的。 如果（X）HTML元素不需要ID，请不要为其分配一个ID，或者至少要尽量避免使用它。

This was originally posted on my blog at http://www.aliencoders.com/content/id-vs-class-css

这最初发布在我的博客上， 网址为http://www.aliencoders.com/content/id-vs-class-css

class-vs-id-in-css1.png class-vs-id-in-css1.png

翻译自: https://www.experts-exchange.com/articles/3948/ID-vs-Class-in-CSS.html

css类选择器与id选择器