如何使用 CSS 选择器选择具有多个类的 HTML 元素？

使用 CSS 选择器定位具有多个类的元素

使用 HTML 和 CSS 时，您可能会遇到需要基于选择元素的情况关于特定阶级的价值观。一个常见的要求是选择分配有多个类的元素。

问题：

给定三个具有以下类的 div：

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

如何使用 CSS 编写 CSS 来仅选择第二个元素（带有“foo bar”类）选择器？

答案：

要选择具有多个类的元素，只需链接类选择器，中间不留任何空格。在此示例中，CSS 代码为：

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

此选择器会将样式应用于第二个 div，因为它是唯一同时分配了“foo”和“bar”类的元素.

附加说明：

Internet Explorer 6 等较旧的浏览器可能无法正确解释链式类选择器。 IE6只会读取最后一个类选择器，而忽略其他类选择器。为了确保与 IE6 的兼容性，您应该避免使用链式类选择器，而应使用更具体的选择器，例如：

div.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

以上是如何使用 CSS 选择器选择具有多个类的 HTML 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！