javascript - CSS 的 future 版本会支持父代或祖先选择器吗？

Question

假设我有一个主题，我正在其中设计其他表单。让我们进一步假设 form 可能有一个 .submit 类的 submit 按钮。在某些情况下，按钮被禁用(表单尚未准备好提交)和按钮未禁用。我可以这样设计按钮:

.submit {
    /*Some Rules*/
}

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

但是，如果我知道该按钮将位于 div 内，并且我想根据 disabled 属性设置其父级的样式，那么我需要实现一个 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 并不是代码重复，因为我们打算添加不同的样式。当然，这段代码可以进行一定程度的重构，但它很丑陋，难以维护，很老套，更不用说它假设无论何时都调用 disable 或 enable需要更改 disabled 属性的状态。虽然即使没有父/祖先选择器，上面显示的所有问题都是可以解决的，但我更希望能够在 .css 文件中实现主题，而不需要 Javascript hack，而不假设每当按钮被禁用时disable 被调用，每当按钮启用时，enable 被调用。另外，如果这种事情可以由 CSS 触发，那么我们可以自动使用浏览器级的果汁，这可以提高性能。

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

我相信我已经在我的问题中证明了，从几个 Angular 来看，这样的 CSS 规则比 Javascript ui hack 更优越:

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

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

Answer 1

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

 element < parent {} 

会有严重的问题。浏览器从右向左读取CSS，因此这种选择器的性能会很低。

相关链接(2008年建议):

• http://shauninman.com/archive/2008/05/05/css_qualified_selectors

为了实现这一点，在 CSS4 中我们可以这样做:

 element:has(.parent) {}

这将是完美的!它可以选择 .parent 选择器包含的元素。我们可以做更多的事情，例如:

 element:not(:has(.parent)) {}
 element:has(#myId > .myClass) {}

目前任何浏览器都不支持此功能。这是一个工作草案，将附带 CSS 级别 4。

相关链接:

• https://snook.ca/archives/html_and_css/css-parent-selectors
• https://remysharp.com/2010/10/11/css-parent-selector
• https://developer.mozilla.org/en-US/docs/Web/CSS/:has
• https://dev.w3.org/csswg/selectors4/#relational

虽然这个很棒的选择器不能用于一般用途，但您必须使用 Javascript 来完成它或考虑另一个 HTML 结构以避免需要父选择器。

版本:

我现在发现了一个polyfill，它允许您使用CSS定位父元素。它是用 jQuery 编写的，但它会翻译 CSS 内容，因此您无需做任何事情即可使其工作(除了包含插件)

• https://github.com/Idered/cssParentSelector

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

! - 根据 CSS4 引用确定选择器的主题

E > F - 选择 F 元素，E 的子元素

E! > F - 选择 E 元素，F 的父元素

CSS4引用

过去，这种语法被用来开发父元素选择器，但由于性能原因它被丢弃了。这是一个解释它的链接:

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

替代技术

这种技术允许您在纯 CSS 中以不同的方式思考来实现相同的功能(风格化父元素)。您可以在这个链接中看到:

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

它解释了如何在没有奇怪的东西、插件或填充的情况下选择父元素。它只是纯 CSS，但背后却蕴藏着昂贵的思考。