CSS类 .foo.bar（无空格）和 .foo .bar（有空格）之间的区别

在本文中，我们将介绍CSS类 .foo.bar（无空格）和 .foo .bar（有空格）之间的区别。

阅读更多：CSS 教程

.foo.bar的作用

CSS类 .foo.bar表示同时具有类名为foo和bar的元素。这意味着这个元素必须同时拥有这两个类才会触发这个样式。这对于给特定的元素应用特定的样式非常有用。例如：

<style>
    .foo {
        color: red;
    }
    .bar {
        font-weight: bold;
    }
    .foo.bar {
        background-color: yellow;
    }
</style>

<div class="foo bar">Hello world!</div>

上面的例子中，.foo.bar选择器将背景颜色设置为黄色，只有同时具有类名为foo和bar的元素才会被选中。因此，只有<div class="foo bar">Hello world!</div>这个div元素的背景颜色会被设置为黄色。

.foo .bar的作用

CSS类 .foo .bar表示具有类名为foo的父元素中，拥有类名为bar的子元素。这个选择器用于选中特定层级关系中的元素，使得我们能够对父元素以下的特定子元素应用样式。例如：

<style>
    .foo {
        color: red;
    }
    .bar {
        font-weight: bold;
    }
    .foo .bar {
        background-color: yellow;
    }
</style>

<div class="foo">
    <p class="bar">Hello world!</p>
</div>

上面的例子中，.foo .bar选择器将背景颜色设置为黄色，只要类名为bar的元素是类名为foo的元素的子元素，其背景颜色就会被设置为黄色。因此，上述代码中的<p class="bar">Hello world!</p>这个p元素的背景颜色会被设置为黄色。

使用和区别

• .foo.bar选择器用于选中同时具有所有指定类的元素，而.foo .bar选择器用于选中特定层级关系中的元素；
• .foo.bar选择器的优先级高于.foo .bar选择器。当一个元素同时具有.foo和.bar这两个类时，.foo.bar选择器的样式会覆盖.foo .bar选择器；
• .foo.bar选择器只能选中同时拥有这两个类的元素，而.foo .bar选择器能选中指定层级关系中的多个元素。例如，当有以下HTML结构时：

<div class="foo">
    <div class="bar">Hello world!</div>
    <p class="bar">Hello CSS!</p>
</div>

使用.foo.bar选择器将没有选中的元素，而使用.foo .bar选择器会选中这两个元素。

总结

在本文中，我们介绍了CSS类 .foo.bar（无空格）和 .foo .bar（有空格）之间的区别。.foo.bar选择器用于选中同时具有所有指定类的元素。而.foo .bar选择器用于选中特定层级关系中的元素。两者的使用和作用不同，需要根据实际情况选择合适的选择器来应用样式。