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-group__details的状态编辑input[readonly]？

类似的东西：

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

else
    .input-group__details
        height: 5px

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

Answer 1

不幸的是，到目前为止，这在CSS中无法实现，并且由于所有CSS预处理器都需要生成CSS，因此无论如何都无法进行任何预处理或后处理。

您将需要更改HTML结构（确保目标元素位于只读输入之后，并且它们共享父元素），或者使用Javascript。

如果您有足够的时间，也可以等待 selectors level 4 到达。

这将解决您的问题

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

Answer 2

使用提供的标记是不可能的，但是如果您允许更改某些标记，则可以获得此标记...尝试.input-group__details input的下一个兄弟{。}}

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

你可以绑定类。

<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
}

如何根据兄弟子属性更改样式

3 个答案: