Html 写这两个代码有什么区别？

我是CSS新手，我只是在尝试CSS，但我的代码中出现了一个混乱。 下面是两个代码片段：

一,

二,

.box是我为代码编写的类。 请告诉我当我们编写代码1和代码2时有什么区别。

.box h1是内部的h1元素。box元素

---

h1.box是h1元素中的.box元素

如果将一个选择器紧跟在另一个选择器之后放置，它将选择第二个选择器的所有匹配元素，这些元素是第一个选择器的元素的后代

例如：

<h1>
    <div class="box">
        <div class="box">
        </div>
    </div>
</h1>

上面的所有div都将由h1.box匹配。如果将其翻转到.box h1，选择器将返回所有h1，这些h1是具有类box的元素的后代，在本例中为none。

在代码1中

.box h1 {
   font-family: 'Jost', sans-serif;
   text-align: center;
}

它正在使用class.box查找标记内部的h1标记。并将更新该h1的样式 即

它正在寻找h1标签内的class.box

即

---

这里的样式仅适用于部分

这是否回答了您的问题？第一种方法是：所有h1-inside.box应用该样式。数字2表示h1中的所有.box应用此样式。通常没人用数字2谢谢！现在很多了clearer@AnishVijay没问题，非常感谢！这很容易理解。

<h1>
    <div class="box">
        <div class="box">
        </div>
    </div>
</h1>

.box h1 {
   font-family: 'Jost', sans-serif;
   text-align: center;
}

<div class="box">
    <h1>Some Text</h1>
</div>

h1 .box {
    font-family: 'Jost', sans-serif;
    text-align: center;
}

<h1><span class="box">Some</span>Text</h1>