Html 更改标签的字体系列

请检查这个提琴（这里的代码只是一个原始代码，我的实际代码有一些引导类）

我在这里试图实现的是，每当用户单击输入框时，字体系列都会发生变化

但不幸的是，只有当标签在输入之后时，它才起作用。 我在中的许多其他答案中看到，提到没有css方法访问前面的元素。 那么，下面的前两个字段是否需要更改标签的字体系列

输入：焦点+标签{
字体系列：“Roboto Medium”，无衬线；
字体大小：16px；
颜色：#000；
字号：500；
}
用户名
电子邮件



你最喜欢的颜色

不幸的是，css中没有前置选择器。 如果您的目标浏览器支持flexbox，则可以执行此操作-参见此

HTML

 <form>
        <div class="some-container">
            <input type="text" name="name">
            <label for="name">username</label>
        </div>
        <div class="some-container">
            <input type="email" name="email">
            <label for="email">email</label>
        </div>

        <br><br>
            <input type="text" name="color">
            <label for="color">your fav color</label>
        </form>

---

不幸的是，css中没有前置选择器。 如果您的目标浏览器支持flexbox，则可以执行此操作-参见此

HTML

 <form>
        <div class="some-container">
            <input type="text" name="name">
            <label for="name">username</label>
        </div>
        <div class="some-container">
            <input type="email" name="email">
            <label for="email">email</label>
        </div>

        <br><br>
            <input type="text" name="color">
            <label for="color">your fav color</label>
        </form>

---

您无法聚焦CSS中的上一个元素。。

---

可以用JavaScript处理。

您不能集中CSS中的前一个元素。。

---

可以用JavaScript处理。

最简单的方法是在标记中交换它们，然后将

标签浮动到左侧

这样，同级选择器
+
将工作，因为
输入
位于标记中的
标签
之前


.swap标签{
浮动：左；
}
输入：焦点+标签{
字体系列：“Roboto Medium”，无衬线；
字体大小：16px；
颜色：#000；
字号：500；
}

用户名
电子邮件




你最喜欢的颜色
最简单的方法是在标记中交换它们，然后将
标签浮动到左侧

这样，同级选择器
+
将工作，因为
输入
位于标记中的
标签
之前


.swap标签{
浮动：左；
}
输入：焦点+标签{
字体系列：“Roboto Medium”，无衬线；
字体大小：16px；
颜色：#000；
字号：500；
}

用户名
电子邮件




你最喜欢的颜色
谢谢您的回答，这对我来说很好，但我恐怕不完全理解添加display:flex和order的帮助。如果这不是太多的问题，你能给我指一些链接或详细说明一下吗谢谢你的回答，这对我来说很好，但我恐怕不完全理解添加display:flex和order有什么帮助。如果这不是太多的要求，你能告诉我一些链接或详细说明这一点吗