Question

我需要一个非常具体的css选择器，它会在某些情况下选择一个按钮元素。只有当按钮立即跟在<input type="text">元素后面时，才应选择该按钮。

以下是显示何时应选择元素的3个示例。最后一个示例显示了未选中按钮的情况（因为它不会紧跟<input type="text">元素。

<!--button is selected-->
<div>
    <label>foo</label>
    <input type="text" />
    <button></button>
</div>

<!--button is selected-->
<div>
    <label>foo</label>
    <input type="text" />
    <label>foo</label>
    <input type="text" />
    <button></button>
</div>

<!--button is selected-->
<div>
    <label>foo</label>
    <input type="text" />
    <button></button>
    <label>foo</label>
    <input type="text" />
    <button></button>
</div>

<!--button is not selected-->
<div>
    <label>foo</label>
    <input type="text" />
    <label>foo</label>
    <select></select>
    <button></button>
</div>

<!--first button selected, second button NOT selected-->
<div>
    <label>foo</label>
    <input type="text" />
    <button></button>
    <button></button>
</div>

Answer 1

输入类型选择器
属性选择器
adjacent sibling combinator
按钮类型选择器

因此：

input[type=text] + button

或者，如果您想支持所有文本输入（因为文本是默认类型），您需要在其他类型的输入中添加一个not子句：

input[type=text] + button,
input:not([type]) + button {
}

Answer 2

使用+选择器

p + div

在P

之后立即选择任何DIV

Answer 3

您正在寻找相邻的兄弟姐妹。这样的事情可以解决问题：

input + button {
    /*do something*/
}

这是一个小提示：http://jsfiddle.net/z1y7mvnk/

Answer 4

如果您想选择与文本类型输入的兄弟姐妹相邻的按钮，您需要将attribute selector与adjacent sibling selector结合使用，如下所示：

input[type=text]+button{
    /* your styles here */
}

或者，如果要选择与文本输入功能类似的任何输入的兄弟姐妹相邻的所有按钮（例如，密码，数字等），则需要将几个字符串串在一起{ {3}}，如下：

input:not([type=checkbox]):not([type=radio]):not(...)+button{
    /* your styles here */
}

在上面的例子中，为输入添加一个类名可能更简单，并使用以下选择器：

input.class+button{
    /* your styles here */
}

CSS选择器immedate兄弟姐妹

4 个答案: