在一个元素中使用两个类的意义是什么？
在一个元素中使用两个类的意义是什么？
提问于 2017-05-15 00:30:01
<!DOCTYPE html>
<html>
<head>
<style>
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1 class2">
<p>paragraph one</p>
<p>paragraph two</p>
</div>
</body>
</html>在一个元素中使用两个类，然后用多个类选择器设置样式，当你只能用一个类选择器设置一个类的样式时，是不是毫无意义？还是有什么我不明白的地方？
回答 3
Stack Overflow用户
发布于 2017-05-15 00:54:57
这样做的两个主要参数是可重用性和双类选择器。使用一组可在多个场景中使用的小CSS类设置一个框架。
我将给出一个简单的例子来演示它：
.container {
background: #eee;
border: 1px solid orange;
padding: 10px;
margin: 10px;
}
.container.a-super-special-container {
color: darkgreen;
}
.green {
color: darkgreen;
}<div class="container">
This page is divided into several containers.
</div>
<div class="container">
So let's use a class <i>.container</i> for styling all of them.
</div>
<div class="container a-super-special-container">
This is a super special container. It builds upon the <i>.container</i> class and colors the text. Instead of copying all the definitions of the <i>.container</i> class we just reuse it.
</div>
<div class="container green">
As an alternative to the classes used in the previous container we could use two reusable classes <i>.container</i> and <i>.green</i> and apply the styles of both of them.
</div>
Stack Overflow用户
发布于 2017-05-15 00:47:52
不，这不是毫无意义的。
- 您可能希望
.class1.class2的样式不同于.class1和.class2的组合规则。 .class1.class2选择器为您的规则赋予了2个类而不是1个类的特异性，因此即使您的代码如下所示：
.class1 {
...
}
.class2 {
...
}
.class1.class2 {
...
}
.class3 {
...
}...属性的.class3值将不会应用于<div class="class1 class2 class3"></div>，即使它稍后被CSS解析，因为前面的选择器具有更大的特异性(2个类)，但它将应用于只有两个类中的一个的元素(即<div class="class1 class3"></div>)。
这完全取决于您的用例。在理想情况下，是的，您应该尽可能地限制类 (id或任何其他选择器)的使用。
编写高质量CSS的另一个经验法则是尽可能限制选择器的特异性。
Stack Overflow用户
发布于 2017-05-15 00:51:15
您对. CSS选择器的理解有误。
你可以看看this JSFiddle
下面是一个小例子
.class1 {
background-color: yellow;
}
.class1.class2 {
background: red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="class1">
<p>paragraph one</p>
<p>paragraph two</p>
</div>
<div class="class1 class2">
<p>paragraph one</p>
<p>paragraph two</p>
</div>
</body>
</html>
第一个div只有一个类，即class1，因此应用了class1的样式
第二个div有两个类，即class1和class2，因此通过在css中使用.选择器，我们可以确保只包含这两个类的元素获得样式。
如果你有.class1.class2，它说的是选择那些既有class1又有class2的元素，然后应用样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43966320
复制相关文章
相似问题
腾讯云开发者
