css类选择器与id选择器
Classes are one of the most powerful CSS selectors, but they tend to be somewhat misunderstood by beginners. Often classes are the only selector some developers know, aside from the basic element, id, and descendant options, and tend to be overused as a result.
类是功能最强大的CSS选择器之一 ，但对于初学者来说，它们往往有些误解。 除了基本元素id和子孙选项之外，类通常是某些开发人员知道的唯一选择器，因此往往会被过度使用。
Simply put, classes are best used for multiple, non-sequential exceptions to presentational stylesheet rules on a page. That non-sequential part is important: if you’re interested in changing the appearance of every second element in a particular context (for example, selecting every other row in a table to create a zebra-stripe visual effect) then nth-child selectors are a far more effective solution. And if you’re only interested in changing a single instance of an element on any page, an id or attribute selector is likely to be more appropriate.
简而言之，最好将类用于页面上呈现样式表规则的多个非顺序异常 。 这个非顺序部分很重要：如果您有兴趣更改特定上下文中每个第二个元素的外观(例如， 选择表中的每隔一行以创建斑马条纹视觉效果 )，则nth-child selectors是一种更为有效的解决方案。 而且，如果您仅对更改任何页面上的元素的单个实例感兴趣，则id或属性选择器可能更合适。
The exception part is also important: it’s common for beginners to find themselves using the same class over and over again for elements on a page. At some point, it’s more likely that they are creating a rule with classes, rather than an exception, and need to rethink the entire approach of their stylesheet.
异常部分也很重要：对于初学者来说，页面上的元素一遍又一遍地使用相同的类来查找自己是很常见的。 在某个时候，他们更有可能使用类而不是异常来创建规则 ，并且需要重新考虑其样式表的整个方法。
What might be an appropriate use of a class? Let’s take the principle of good design through consistent spacing: in most pages where you want text text to wrap around to the right or left of an image with a vertical “gutter”. At the same time, you’ll want to ensure that nothing is floating beside the image, to avoid the “float stack quirk”.
类的适当用法是什么？ 让我们通过一致的间距来采用良好设计的原则：在大多数页面中，您希望文本带有垂直“装订线”的图像环绕在图像的右侧或左侧。 同时，您将要确保图像旁边没有漂浮的东西，以避免“ float stack quirk ”。
We could do this by adding the appropriate CSS to the inline style of every image:
我们可以通过在每个图像的内联样式中添加适当CSS来做到这一点：
<p><img src="blue-mountain-shoreline.jpg"
alt="Photograph of shoreline near Blue Mountain, Ontario"
style="float: right; clear: right; margin-left: 2rem;">
See more photos by <a href="//flickr.com/photos/dexxus">Paul Bica</a>
licensed under Creative Commons
</p>While this works, it’s extremely repetitive. That repetition creates opportunities for mistakes or changing your mind, both of which are detrimental to a consistent design. Instead, we’ll leave the properties and values that are totally unique to the image inline, and externalize commonalities to a class.
尽管这有效，但它是非常重复的。 重复会为错误或改变主意创造机会，而这两者都不利于一致的设计。 取而代之的是，我们将内联图像完全唯一的属性和值保留在内联 ，并将通用性外部化为class 。
Our classes will be given logical names:
我们的类将被赋予逻辑名称：
img.left {
float: left;
clear: left;
margin-right: 2rem;
}
img.right {
float: right;
clear: right;
margin-left: 2rem;
}Removing the redundant CSS and applying this to our image will result in:
删除多余CSS并将其应用于我们的图像将导致：
<p><img src="blue-mountain-shoreline.jpg”
alt="Photograph of shoreline near Blue Mountain, Ontario” class="right">
See more photos by <a href="//flickr.com/photos/dexxus">Paul Bica</a>
licensed for use under Creative Commons
</p>The use of classes allows the stylesheet to be far more effective while making the design much more consistent.
使用类可以使样式表更加有效，同时使设计更加一致。
You’ll note that I’ve prefixed each CSS class selector with the element it will be applied to. The advantage of this approach that it makes reading the selector obvious: you can instantly see how and where the class is applied. The downside is that very same specificity makes it impossible for the class to be used in any other context in your site: trying to float a table with <table class="right"> would not work, as the class is locked to images.
您会注意到，我为每个CSS类选择器添加了将要应用到的元素的前缀。 这种方法的优点是使选择器的阅读变得显而易见：您可以立即看到如何以及在何处应用该类。 不利的一面是，非常特殊的特性使得该类无法在您的网站的任何其他上下文中使用：尝试使用<table class="right">浮动表将不起作用，因为该类已锁定在图像上。
It is sometimes better to make CSS classes “generic” by not prepending anything to the selector:
有时最好不要在选择器之前添加任何内容，以使CSS类成为“通用”类：
.left {
float: left;
clear: left;
margin-right: 2rem;
}
.right {
float: right;
clear: right;
margin-left: 2rem;
}This makes the class much more versatile, with a small loss of comprehension. You should offset this loss by commenting your CSS.
这使班级变得更加通用，而对理解的损失很小。 您应该通过注释CSS来弥补此损失。
组合班的力量 (The Power Of Combined Classes)
Classes also have a unique combinatorial option: that is, you can use multiple classes on an element to create merged appearance rules. This feature is often used in Object-Oriented CSS techniques such a SMACSS, where the appearance of elements is atomized into different classes that can be conjoined together to create a variety of thematically consistent designs.
类还具有唯一的组合选项：即，您可以在元素上使用多个类来创建合并的外观规则。 此功能通常用于诸如SMACSS 的面向对象CSS技术中，其中元素的外观被雾化为不同的类，这些类可以结合在一起以创建各种主题上一致的设计。
For example, let’s create a series of CSS classes for an imaginary site:
例如，让我们为一个虚构的站点创建一系列CSS类：
.round5px {
border-radius: 5px;
}
.greygradient {
background: linear-gradient(rgb(199,199,206),
rgb(0,0,0));
}
.redgradient {
background: linear-gradient(rgb(199,0,0),
rgb(0,0,0));
}
.borderstandard {
border: 2px solid black;
}By declaring these different classes, we can combine them in multiple ways in elements:
通过声明这些不同的类，我们可以将它们以多种方式组合到元素中：
<figure> element with a black border and a grey gradient background:
具有黑色边框和灰色渐变背景的<figure>元素：
<figure class="borderstandard greygradient">…</figure>div with a black curved border:
带有黑色弯曲边框的div ：
<div class="borderstandard round5px">…</div>Another <div> with a grey gradient background and radiused black border:
另一个<div>具有灰色渐变背景和圆角黑色边框：
<div class="borderstandard redgradient round5px">…</div>If you want to reference an element with multiple CSS classes, you can do so by using a series of class selectors with no spaces:
如果要引用具有多个CSS类的元素，可以使用一系列不带空格的类选择器来进行引用：
div.borderstandard.redgradient { }Approached with careful planning, these CSS techniques can be used to make an extremely powerful “pattern library” of CSS “swatches” that you can apply to your site to create consistent, powerful and easily adaptable designs.
经过精心计划，这些CSS技术可用于创建功能极为强大CSS“样本”的“模式库”，您可以将其应用于站点以创建一致，功能强大且易于适应的设计。
翻译自: https://thenewcode.com/597/A-Touch-Of-Class-UsingCSS-Class-Selectors-Effectively
css类选择器与id选择器
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
