时间戳

首页 > 解决方案 > 选择标签被css更改后是否可以控制div？

css - 选择标签被css更改后是否可以控制div？

问题描述

select[value="2"]+div{
  background:blue;
  font-size: 20px;
}
select[value="3"]+div{
  background:red;
}
<select name="" id="">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div>hi</div>

I want to control background of div tag, when select changed. 可以只使用css吗？

标签： css

解决方案

可悲的是，它不是。CSS 属性选择器不适用于 DOM 属性，并且选项的选择不会更改这些属性，只会更改属性。

我不确定这是否适用于您的用例，但您可以做的一件事是使用 :valid 和 :invalid 伪类为 div 着色。看起来像这样：

select:valid + div {
  color: green;
}
<select required>
  <option value="">Empty</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div>HI</div>

推荐阅读