如何在 css 中创建多个类选择器？ [复制]答案

【问题标题】：how do I create multipe classes selector in css? [duplicate]如何在 css 中创建多个类选择器？ [复制]
【发布时间】：2020-02-17 04:59:40
【问题描述】：

我的 HTML：

<div class="first second">...</div>
<div class="third">...</div>

我的 CSS：

.first.second {
   ... // lots of properties setup here(50+ lines)
}

我的问题是：

Q1-对于.first.second 选择器，我认为它的意思是.first && .second，而不是.first || .second，我的理解正确吗？它的正式名称是什么，我找不到有关它的资源。

Q2- 我希望 third 类具有相同的属性设置，但避免设置新的类选择器，例如：

.third {
   ... // 50+ duplicated lines and take so much space on the css file
}

但我不能这样做：

.first.second.third {
   ... 
}

因为它的意思是.first && .second && .third

那么代表(classA %% classB) || classC的最佳方式是什么

【问题讨论】：

标签： html css

【解决方案1】：

在你的第一个问题中是肯定的，.first.second 表示AND，在你的第二个问题中，包含.third 类的正确方法是这样的.first.second, .third

您可以阅读有关 CSS 选择器的更多信息 here。

【讨论】：

【解决方案2】：

对于Q1，你的理解是正确的，就是.first && .second。对于 Q2，最好的方法是为 div 设置一个通用类并为该类编写 css。类似的，

<div class="first second common">...</div>
<div class="third common">...</div>

和，

.common {
//common css
}

【讨论】：

【解决方案3】：

.first.second, .third {
   ... 
}

使用这个检查这个帖子 What do commas and spaces in multiple classes mean in CSS?

【讨论】：

【解决方案4】：

Q1-for .first.second 选择器，我认为它的意思是 .first && .second，不是 .first || .second，我的理解正确吗？什么是它的正式名称，我找不到有关它的资源。

.first.second 选择器将针对具有两个类名的所有元素，例如

<div class="first second"></div>

所有只有first 或只有second 类名的元素都将被忽略。

Q2- 我希望第三类具有相同的属性设置，但避免设置一个新的类选择器

您可以将同一组样式属性应用到多个选择器，方法是将它们链接在一个逗号分隔的列表中，例如

.first,
.third {
 /* ... */
}

这会将样式应用于具有first 类名的所有元素以及具有third 类名的所有元素。

【讨论】：

【解决方案5】：

.yourselector:nth-child(n){ ...你的CSS ... }

<ul>
   <li class="first"> First </li>
   <li class="first"> Second </li>
   <li class="first"> Third </li>
</ul>

<style> 
    .first:nth-child(n){
        background-color: tomato;
        margin-bottom: 10px;
    }
</style>

如果你想使用 .first .second .third

<ul>
   <li class="first"> First </li>
   <li class="second"> Second </li>
   <li class="third"> Third </li>
</ul>

<style> 
    li:nth-child(n){
        background-color: tomato;
        margin-bottom: 10px;
    }
</style>

【讨论】：

【解决方案6】：

答案如下：

Q1：是的，每次您同时定义 2 个或更多选择器时，它们都会导致与操作。 所以它会寻找一个同时具有 classA && classB 的元素。

您可以同时为不同的类引入相同的样式，方法是使用逗号 (,) 分隔它们。这就引出了您的第二个答案。

第二季度：

.first.second , .third {
    // your style properties here
    // same style will appy to elements having both first and second classes
    // also the elements having only third class
}

【讨论】：