Question

单击<p>颜色更改

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

<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>

我要红了！它会变质的...等等...

点击我！

Answer 1

~是指元素之后的所有同级元素。在您的示例中，.to-be-changed是上一个同级。您可以将它们按所需的顺序放置在dom中，然后使用flex和order

重新排序

span:focus~.to-be-changed {
  color: red;
}

.container{
  display: flex;
  flex-direction: column;
}

.container .to-be-changed{
  order: 1;
}

.container span{
  order: 2;
}

<div class="container">
  <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>
</div>

Answer 2

.parent {display: flex;}
span { order: 2;}
.to-be-changed {order: 1;}
span:active~.to-be-changed {
  color: red;
}

<div class="parent">
<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>
</div>

到目前为止（2019年2月），您不能选择元素的父级或元素的上一个同级。

但是您可以做一个CSS技巧，将<p>元素放在html中的<span>元素之后，但将<p>元素显示在span元素之前。然后，您可以实现目标。上面的代码段是一个示例，如果您需要支持旧的浏览器，也可以使用float:right;。

但是，将来，我们将使用'：has（）'css选择器，该选择器将允许我们选择元素的父级。在这里您可以检查此选择器信息:has() selector。

使用纯CSS将类添加到父类

2 个答案: