CSS选择同一层级两个样式类

在CSS中，我们可以使用选择器来选择HTML元素，并为其应用样式。常见的选择器有标签选择器、类选择器、ID选择器等。有时候我们需要为同一个元素应用多个样式类，这时候就需要使用多个样式类选择器来实现。

什么是同一层级两个样式类

同一层级两个样式类是指一个HTML元素同时具有两个或多个不同的样式类，并且这两个样式类都会为该元素添加样式。这种情况通常发生在我们希望一个元素同时具有两种风格或状态时。

如何实现

在HTML中，我们可以为一个元素添加多个class属性，而在CSS中，我们可以使用多个类选择器来为同一个元素应用不同的样式类。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
    .class1 {
        background-color: red;
    }

    .class2 {
        color: white;
    }
</style>
</head>
<body>

<div class="class1 class2">
    同时具有class1和class2样式的div元素
</div>

</body>
</html>

在上面的示例代码中，我们定义了两个样式类.class1和.class2，分别设置了背景颜色和文字颜色。在<div>元素中，同时添加了class1和class2两个样式类，这样该<div>元素就会同时应用两个样式类的样式，背景颜色为红色，文字颜色为白色。

进阶用法

除了同时为一个元素应用多个样式类外，我们还可以使用其他的选择器结合来选择同一层级中的元素并为其应用样式。例如，我们可以使用同一层级相邻选择器+来选择某个元素的相邻元素，并为相邻元素应用不同的样式类。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
    .class1 {
        background-color: red;
    }

    .class2 {
        color: white;
    }

    .class3 {
        font-size: 20px;
    }
</style>
</head>
<body>

<div class="class1 class2">
    同时具有class1和class2样式的div元素
</div>

<p class="class3">相邻元素</p>

</body>
</html>

在上面的示例代码中，除了<div>元素应用了class1和class2两个样式类外，<p>元素也应用了class3样式类。由于<p>元素位于<div>元素之后，我们可以使用+选择器来选择<div>元素后的相邻元素<p>，并为其应用class3样式类的样式，这样<p>元素的文字大小就会变为20px。