Question

让我们假设我有一个主题，我正在设计form。我们进一步假设form可能有一个submit类.submit按钮。有时按钮为disabled（form尚未准备好提交）且按钮不是disabled。我可以像这样设计按钮：

.submit {
    /*Some Rules*/
}

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

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

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

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

目前不支持此功能。

让我们进一步假设我想根据按钮的form属性设置disabled的样式，以直观地显示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或disabled 1}}属性需要更改。虽然上面显示的所有问题都是可以解决的，即使没有父/祖先选择器，我宁愿能够在没有Javascript黑客的情况下在.css文件中实现主题，而不假设只要按钮获得disable {{1调用按钮时，只要一个按钮被启用，就会调用enable。此外，如果这种事情可以由CSS触发，那么我们可以自动使用浏览器级别的果汁，这样可以提高性能。

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

我相信我已经在我的问题中证明，与Javascript ui hacks相比，这样的CSS规则会优于几个观点：

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

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

Answer 1

是。在CSSv4中将是:has()伪选择器。父元素的问题是陈旧的，您的建议是众所周知的：

 element < parent {}

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

版：

我现在发现了一个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

它解释了如何选择没有奇怪的东西，插件或polyfill的父元素。它只是纯粹的CSS，但背后有着昂贵的想法。

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

1 个答案:

版：

替代技术