css - 不寻常的 CSS 选择器

Question

我需要执行一个不寻常的 CSS 选择。我想检查是否需要输入，如果需要，则选择它的前一个邻居并对它做一些事情(这将是描述输入的标签)。

HTML代码

<fieldset>
    <legend>My Description</legend>
    <div>
        <input type="text" required="required">
    </div>
</fieldset>

<fieldset>
    <legend>My Description Two</legend>
    <div>
        <input type="text">
    </div>
</fieldset>

如何选择在其特定字段集中包含具有所需属性的输入的图例？

Answer 1

这需要 CSS4 subject支持 — 使您能够在选择器链中您希望返回的任何元素前加上一个 ! — 遗憾的是目前在任何浏览器中都不可用(并且暂时不可能)。该方法将是:

!legend + div > [required]

没有这个，你的选择就很迟钝。假设 jQuery:

$( '[required]' ).parent().prev( 'legend' );

---

编辑:再次阅读您的帖子，我意识到所需的输入嵌套在 div 中，而前一个元素是图例的事实只是解释您真正问题的附带细节，实际上(除非我弄错了)关于找到以前的元素，即使它们在 DOM 树的更高层——碰巧我为此写了一个 jQuery 插件，所以我不把它插在这里是愚蠢的 ;)

使用 jQuery.sequentialTraversal :

$( '[required]' ).sequentialPrev();

该插件使用文档树的“扁平化”解释，使得嵌套变得无关紧要，允许您在纯顺序(而不是分层)DOM 列表中上下移动。

可用的方法有 sequentialNext、sequentialNextAll、sequentialPrev 和 sequentialPrevAll — 它们与 jQuery 的 API next, 'nextAll' 等