CSS 类选择器包含

CSS 类选择器是用于为 HTML 元素添加样式的选择器之一。类选择器以“.”开头，后面跟随类名。

例如，在 HTML 中定义一个类名为“my-class”的元素：

<div class="my-class">This is a div with the class "my-class".</div>

要为这个元素添加样式，我们可以在 CSS 中使用类选择器：

.my-class {
  color: red;
  font-size: 20px;
}

这将设置该元素的颜色为红色，字体大小为20像素。

然而，有时候我们需要一些更加精确的选择器来匹配多个类名。这时，就可以使用包含选择器。

包含选择器

包含选择器使用“.”符号来连接两个不同的类名，并在它们之间添加空格。这种选择器将匹配拥有所有指定类名的元素。

例如，假设我们有这样一个 HTML 结构：

<div class="foo bar">This div has both the "foo" and "bar" classes.</div>
<div class="foo">This div only has the "foo" class.</div>
<div class="bar">This div only has the "bar" class.</div>
<div class="foo bar baz">This div has all three classes: "foo", "bar", and "baz".</div>

如果我们希望匹配所有拥有类名“foo”和“bar”的元素，可以使用以下 CSS：

.foo.bar {
  color: blue;
  font-weight: bold;
}

这将匹配所有拥有“foo”和“bar”类名的元素，并将它们的文字设置为蓝色加粗。

另外，我们也可以使用包含选择器加上其他的选择器，以实现更精确的匹配。例如，以下代码将只会匹配一个拥有类名“foo”和“bar”，并且还有一个“strong”标签子元素的元素：

.foo.bar strong {
  color: green;
}

总结

包含选择器是一种用于匹配拥有多个类名的元素的选择器。它使用“.”符号来连接两个不同的类名，并在它们之间添加空格。这种选择器将匹配拥有所有指定类名的元素。使用包含选择器可以更加精确地匹配元素，并为它们添加样式。