Question

我的html中有一个类似的标记：

<div class="...">
    <a href="...">...</a>
    <input type="hidden" name="...">
    <input type="text" name="...">
    ...
    <div class="...">
        <a href="...">...</a>
        <input type="hidden" name="...">
        <input type="text" name="...">
    </div>
    <div class="...">
        <a href="...">...</a>
        <input type="hidden" name="...">
        <input type="hidden" name="...">
        <input type="text" name="...">
    </div>
    <input type="text" name="...">
    <input type="text" name="...">
    ...
    <input type="hidden" name="..."> 
    <div class="...">
        <a href="...">...</a>
        ...
        <input type="text" name="...">
    </div>
</div>

我想将css样式仅分配给input[type='text']元素内的div元素，该元素也是兄弟至少一个a（锚）元素。所以我使用这些css选择器：

div > a ~ :not(input[type='hidden']) { /* css style */ }
div > a ~ input:not(input[type='hidden']) { /* css style */ }
div > a ~ input[type!='hidden'] { /* css style */ }

但它没有选择任何东西。我已经:not选择器无法处理复杂的选择，因此我删除了[type='hidden']部分，但它仍然无法正常工作。

我设法做了一些解决方法，如：

将class添加到所有input[type='text']目标。
使用此选择器：div > input[type='text']

但如果你能按我的要求给我选择器，我将非常感激。感谢。

Answer 1

将您的css选择器更改为：

div > a ~ :not([type='hidden']) { background: #000 }

更新：仅选择输入字段

div > a ~ input:not([type='hidden']) { background: #000 }

Answer 2

你可以给文本输入一个class，这将是最简单的解决方案，但我认为这不是基于你提出这个问题的事实的选择。

这是您可以使用的一些选择器：

.classname {}
div > a ~ input:not([type='hidden']) {}

或者如你所提到的那样class hidden，这会给你这个选择器：

div > a ~ input:not(.classhiddeninputs) {}

或者，如果您知道确切的位置（意思是，文本输入始终是第3个），您可以这样做：

div input:nth-of-type(3) {}

：不应用css中的选择器

2 个答案: