CSS 的未来版本是否支持 parent 或祖先选择器？

Question

让我们假设我有一个正在设计的主题 forms。让我们进一步假设 form 可能有一个 class .submit 的 submit 按钮。有时按钮是 disabled（form 还没有准备好提交），有时按钮不是 disabled。我可以这样设计按钮：

.submit {
    /*Some Rules*/
}

.submit:disabled {
    /*Some Rules*/
}

但是，如果我知道该按钮将位于 div 内并且我想根据 disabled 属性设置其 parent 的样式，那么我需要实现 disable 和启用 function 并在 function 中设置 parentElement 样式。相反，我希望能够定义这样的规则：

.submit < div { /*where < would mean parent*/
    /*Some rules*/
}

.submit:disabled < div {
    /*Some rules*/
}

目前不支持。

让我们进一步假设我想根据按钮的 disabled 属性设置 form 的样式，以直观地显示 form 是否已准备好提交。在这种情况下，我需要找到祖先 form 标记（如果存在）并在调用 disable 或 enable 时设置样式。相反，我希望能够做这样的事情：

.submit << form { /*Where << means ancestor*/
    /*Some rules*/
}

.submit:disabled << form {
    /*Some rules*/
}

代替这种简单直接的方式，目前我们需要做这样的事情：

function disable(element) {
    element.disabled = true; //Disabling the button
    var p = element.parentElement; //Here we need to style p with Javascript
    //Find the form element
    var formExists = true;
    while (formExists && (p.tagName !== "form")) {
        if (p.tagName === "html") {
            formExists = false;
        } else {
            p = p.parentElement;
        }
    }
    if (formExists) {
        /*Do something with p*/
    }
}

function enable(element) {
    element.disabled = false; //Disabling the button
    var p = element.parentElement; //Here we need to style p with Javascript
    //Find the form element
    var formExists = true;
    while (formExists && (p.tagName !== "form")) {
        if (p.tagName === "html") {
            formExists = false;
        } else {
            p = p.parentElement;
        }
    }
    if (formExists) {
        /*Do something with p*/
    }
}

尽管外观如此，但 disable 和 enable 不是 code-duplication，因为我们打算添加不同的样式。当然，这段代码可以进行一些重构，但它很难看，难以维护，hacky，更不用说它假设只要 [= 的状态，就会调用 disable 或 enable 20=] 属性需要更改。虽然上面显示的所有问题即使没有 parent/ancestor 选择器也是可以解决的，但我更希望能够在 .css 文件中实现主题，而不需要 Javascript hack，而不假设每当button gets disabled disable 被调用，每当一个按钮被启用时 enable 被调用。此外，如果这种事情可以由 CSS 触发，那么我们可以自动使用 browser-level juices 来提高性能。

另一种方法是为 form 定义 class，但是 class 需要与 disabled 属性一起以编程方式维护好不了多少。

我相信我已经在我的问题中证明，从几个角度来看，这样的 CSS 规则比 Javascript ui 黑客更优越：

parents 和祖先可以在单个 .css 文件中设计
开发人员不必担心调用辅助函数，也不必担心告诉新团队成员这些策略或记录主题的使用
无需编写 difficult-to-maintain Javascript 函数来处理 ui 更改
如果需要，我们可以用其他 CSS 规则覆盖规则，而不是将黑客攻击升级为更大的黑客攻击

我知道 parent 和祖先选择器不在我们可以使用的 CSS 功能中，所以我想知道这种情况是否会有所改善。是否有针对此类功能的已知计划？这些是安排在未来的日期吗？

Answer 1

是的。在 CSSv4 中将是 :has() 伪 selector。父元素的问题由来已久，您的建议广为人知：

 element < parent {}

会有严重的问题。浏览器从右到左读取 CSS，所以这种 select or 的性能会很低。

版本：

我现在找到了一个 polyfill，它允许您使用 CSS 定位父元素。它是用 jQuery 编写的，但它翻译了 CSS 内容，所以你不需要做任何事情来让它工作（除了插件包含）

https://github.com/Idered/cssParentSelector

从插件页面提取的快速信息：

! - 确定 select 的主题或根据 CSS4 参考

E > F - selects 一个 F 元素，E

的子元素

E! > F - selects 一个 E 元素，F

的父元素

CSS4 参考

过去，此语法用于开发父元素 selector，但由于性能原因，它已被废弃。给你一个 link 解释：

http://red-team-design.com/css-parent-selector/

替代技术

这是一种技术，可以让您以不同的方式思考纯粹的 CSS 以实现相同的功能（风格化父元素）。你可以在这个link:

中看到

https://escss.blogspot.com/2014/02/parent-selector-pure-css.html

它解释了如何在没有奇怪的东西、插件或 polyfill 的情况下 select 父元素。它只是纯粹的 CSS 但背后有一个昂贵的想法。

CSS 的未来版本是否支持 parent 或祖先选择器？

Will future versions of CSS support parent or ancestor selector?

html

javascript

css

jquery

parent-selector

版本：

替代技术