如何基于兄弟元素子元素readonly属性修改样式（Vuetify+Stylus）

当然可以做到！不过因为CSS目前还不支持父选择器，我们得换个思路——利用兄弟选择器来实现，毕竟你的DOM结构里input的父容器.input-group__input和.input-group__details是同级元素，我们可以通过定位input[readonly]来关联到目标元素。

下面给你几种实用的Stylus写法：

1. 通用兄弟选择器（兼容性最好） #

这种写法适配所有现代浏览器，通过选中包含input[readonly]的.input-group__input，再选中它之后的所有同级.input-group__details：

.input-group
  // 当内部input为readonly时，修改input-group__details样式
  .input-group__input input[readonly]
    ~ .input-group__details
      // 示例样式：修改背景色和文字颜色
      background-color: #f5f5f5
      color: #9e9e9e
      // 可根据需求添加边框、透明度等样式

2. 相邻兄弟选择器（更精准） #

如果.input-group__details是紧跟在.input-group__input之后的唯一同级元素，用+相邻兄弟选择器会更高效：

.input-group
  .input-group__input input[readonly]
    + .input-group__details
      // 示例样式：降低透明度并禁用交互
      opacity: 0.6
      pointer-events: none

3. :has()伪类（现代浏览器推荐） #

如果你不需要兼容旧版浏览器，可以用:has()伪类直接给包含readonly input的.input-group添加状态，这样不仅能修改input-group__details，还能同步调整label等其他子元素的样式：

.input-group:has(.input-group__input input[readonly])
  label
    color: #757575
  .input-group__details
    // 示例样式：添加左侧边框标识只读状态
    border-left: 2px solid #ccc

这些方案都能完美实现你想要的效果，根据你的项目兼容性需求选一个就行！

内容的提问来源于stack exchange，提问作者Artur Grigio