如何根据同胞子属性更改样式

Question

我正在与 Vuetify 和 Stylus 合作处理 HTML

的这个片段

<div class="input-group input-group--dirty input-group--text-field">
    <label>Language</label>
    <div class="input-group__input">
        <input readonly="readonly" type="text"/>
    </div>
    <div class="input-group__details"></div>
</div>

是否有 CSS/Stylus 方法可以根据 input[readonly] 的状态编辑 input-group__details？

类似于：

if (.input-group > input has readonly)
    .input-group__details
        height: 0px

else
    .input-group__details
        height: 5px

基本上，如何根据兄弟姐妹的子属性更改 class？

Answer 1

好吧，使用提供的标记是不可能的，但是如果您允许更改某些标记，您可以获得这个...尝试使 .input-group__details 成为 input 的下一个同级 ..

此外，您不需要为 readonly 赋值...只需使用 readonly

input[readonly]+.input-group__details {
  color: red;
}

<div class="input-group input-group--dirty input-group--text-field">
  <label>Language</label>
  <input class="input-group__input" type="text" readonly />
  <div class="input-group__details">Welcome</div>
</div>
<br>
<div class="input-group input-group--dirty input-group--text-field">
  <label>Language</label>
  <input class="input-group__input" type="text" />
  <div class="input-group__details">Welcome</div>
</div>

Answer 2

可以绑定class.

<div class="input-group input-group--dirty input-group--text-field" :class="'className': trueFalse">
    <label>Language</label>
    <div class="input-group__input">
        <input readonly="readonly" type="text"/>
    </div>
    <div class="input-group__details"></div>
</div>

现在在你的 vue 脚本中：

data: {
    trueFalse: false,
},
methods: {
    someClassName() {
        //condition of your input field
        //if condition true make 'trueFalse' to true else to false
        this.trueFalse = true
    }
}

终于在你的 css:

.className {
    //add your style with !important
}

Answer 3

不幸的是，截至目前，这无法在 CSS 中实现，并且由于所有 CSS 预处理器都需要生成 CSS，因此也无法使用任何预处理器或 post-processing 随便。

您要么必须更改 HTML 结构（确保目标元素出现在只读输入之后，并且它们共享父元素），要么求助于 Javascript。

如果时间充裕，也可以等selectors level 4到达

这将解决您的问题

.input-group__input:has(input[readonly]) + .input-group__details { ... }

如何根据同胞子属性更改样式

How to change style based on sibling child attribute

css

vue.js

css-selectors

stylus

vuetify.js