时间戳

首页 > 解决方案 > 使用 CSS 而不是 Javascript 向父级添加类

css - 使用 CSS 而不是 Javascript 向父级添加类

问题描述

如果选中复选框，则在不使用 Javascript 的情况下将 CSS 类添加到父级。

这是尝试过的代码：

CSS 代码：

span:focus~.to-be-changed {
  color: red;
}

HTML 代码：

<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
<span tabindex="0">Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

标签： csshtml

解决方案

如果您允许更改 html 标记，则有一种方法。flex在父容器及其属性中使用order来随机播放子元素。

span:focus~.to-be-changed {
  color: red;
}

div {
  display: flex;
  flex-direction: column;
}

span {
  order: 2;
}
<div>
  <span tabindex="0">Click me!</span>
  <p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
  <p class="to-be-changed" style="order:3;">I'm going to be red! It's gonna be legen... Wait for it...</p>
</div>

推荐阅读