html - 如何选择具有两个类的元素？

Question

我有这个 HTML：

<h2 class="first second">Red</h2>
<h2 class="second">Blue</h2>
<h2 class="first">Green</h2>

我如何选择h2和first类second？

_{谢谢你的回答}

---

更新：

如果我有另一个h2这样的标签：

<h2 class="first second third">Default</h2>

选择器将是红色的h2.first.second。有没有办法只选择带有first和second类的元素，而不是更多。

Answer 1

简单地：

h2.first.second {
    color: red;
}

这将选择h2具有“第一”和“第二”类的元素。有关更多信息，请参阅CSS 选择器 Level 3 W3 建议。

JSFiddle 演示。

Answer 2

如果您尝试同时选择一等和二等的 h2

h2.first.second

Answer 3

我已经创建了解决方案的工作 CodePen 示例。

h2.first.second {
/* styles go here*/
}

Answer 4

要选择具有多个类的元素，请使用以下命令：

h2.first.second

请注意，类之间没有空格，如下所示，将选择类的元素在类的元素second内h2first

h2.first .second

Answer 5

以下规则匹配h2其 class 属性已分配包含“first”和“second”的空格分隔值列表的任何元素：

h2.first.second { color: red }

参考

但是，要选择一个其类属性完全等于“first”和“second”的元素，我使用了以下规则：

h2[class="first second"], h2[class="second first"] { color: red }

JsFiddle 演示。

Answer 6

你可以选择

.first.second {}

如果您只想选择第一个 h2。确保没有空间！