是否有一个特定类型的所有兄弟姐妹的CSS选择器?

Question

假设有3个输入，2个type="text"和1个type="button"

是否有一种方法来选择所有的兄弟类型的文本按钮?

例如，在按钮悬停时将background: yellow;应用于其文本兄弟。

li input{
margin:3px;
}
li [type="button"]{
background:red;
color:white;
border:1px solid grey;
}
li:hover [type="button"]{
background:white;
color:red;
}

<ol>
<li><input type="text"><input type="text"><input type="button" value="BUTTON"> 
</li>
</ol>

Answer 1

CSS只能处理"future"元素，所以你不能选择"先前的兄弟元素"。

---

我也建议使用类，但这取决于你。

---

您可以选择以下~的兄弟姐妹，并将元素反向放置:

[type="button"]:hover ~ [type="text"] {
border: 1px solid red;
}
input {
float: right;
}

<div class="wrapper">
<input type="text"/>
<input type="button"/>
<input type="text"/>
<input type="text"/>
</div>

---

更好的解决方案:在父元素上应用hover:

.wrapper:hover [type="text"] {
border: 1px solid red;
}

<div class="wrapper">
<input type="text"/>
<input type="button"/>
<input type="text"/>
<input type="text"/>
</div>