CSS 可以单独根据所选元素设置'元素的样式”吗？

样式基于所选 的元素：CSS 单独可用吗？

问题： 尝试对 进行样式设置基于所选的元素事实证明，使用 CSS 是一个挑战。与可以直接设置样式的选项元素不同，对所选元素的样式仍然难以捉摸。

答案：

仅靠 CSS 不足以对 进行样式设置。基于所选的的元素。然而，涉及 onchange 事件和数据属性分配的巧妙解决方法可以为您提供这种令人垂涎的能力。

解决方案：

1. 分配一个值到数据选择的属性：
   在上元素，添加一个 onchange 事件，将当前值分配给 data-chosen 属性。这使得所选选项的值可用于 CSS。
2. 以选择元素为目标：
   创建以 为目标的 CSS 规则。基于数据选择属性的元素。在此示例中，opt3 值旨在设置所选选项的样式。

<select onchange=" this.dataset.chosen = this.value; ">
    ...
    ...
</select>

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

注意： 虽然此解决方案提供了一种有效的方式来设置 的样式;基于所选 的元素，它可能不会得到跨浏览器的广泛支持。

以上是CSS 可以单独根据所选元素设置'元素的样式”吗？的详细内容。更多信息请关注PHP中文网其他相关文章！