css 实现 tailwindcss peer 功能

news/2025/2/27 2:58:16/

1.假设我们有两个相邻的元素，当第一个元素处于 focus 状态时，我们要改变第二个元素的样式。

①.运用 :focus 伪类和相邻兄弟选择器 +，当 input 元素处于 focus 状态时，改变 div 元素的背景颜色和文字颜色。

<!DOCTYPE html>
<html lang="zn-ch"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><style>/* 基础样式 */.input-element {border: 1px solid #ccc;padding: 8px;}.peer-element {background-color: #f0f0f0;padding: 8px;margin-top: 10px;}/* 当 input 元素处于 focus 状态时，改变 peer 元素的样式 */.input-element:focus+.peer-element {background-color: #e0e0ff;color: #000;}</style>
</head><body><input type="text" class="input-element"><div class="peer-element">This is a peer element</div>
</body></html>

2.如果元素并非相邻关系，你可以使用一般兄弟选择器 ~ 来实现类似的效果。

<!DOCTYPE html>
<html lang="zn-ch"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><style>/* 基础样式 */.input-element {border: 1px solid #ccc;padding: 8px;}.intermediate-element {padding: 8px;}.peer-element {background-color: #f0f0f0;padding: 8px;margin-top: 10px;}/* 当 input 元素处于 focus 状态时，改变 peer 元素的样式 */.input-element:focus~.peer-element {background-color: #e0e0ff;color: #000;}</style>
</head><body><input type="text" class="input-element"><div class="intermediate-element">This is an intermediate element</div><div class="peer-element">This is a peer element</div>
</body></html>