最新的CSS父选择器

Question

我能找到的最新信息是W3C Selectors Level 4 Editor’s Draft，但据我所知，它不再提及父选择器了。

我知道有一个Google survey about this，但现在已经结束了。

父选择器发生了什么变化？它会被引入，还是被删除了？

Answer 1

调查最终导致了主题选择器（传说中的＆＃34;父选择器＆＃34;的正确名称）被更广泛的:has()伪类替换，其中记录了{{{ 3}}（有一个有趣的主播名称，#relational，我想知道是否会坚持）。

实现可能仅在此功能的规范更稳定时才会到达。目前，由于完全用伪类替换主题选择器这样的颠覆性变化，我不会很快就会发生这种变化。也就是说，:has()伪类很可能会坚持下去，但是它是否可以在CSS中实现还有待观察，因为它的本质。请参阅here以了解实施配置文件。

---

:has()更通用的原因是因为使用主题选择器，如果单个复杂选择器可以有多个主题选择器，则任何草稿都不会明确（因为单个复杂选择器只能使用有一个主题）和/或函数伪类如:matches()是否接受了主题选择器。但是因为伪类是一个简单的选择器，你知道在接受伪类的任何地方都可以接受:has()。

作为一个例子，这使得这样的选择器在理论上非常可行：

/* 
 * Select any p
 * that is a sibling of a ul
 * that has more than one li child.
 */
ul:has(> li:nth-of-type(2)) ~ p,     /* p follows ul */
p:has(~ ul:has(> li:nth-of-type(2))) /* p precedes ul */

然而，使用主题选择器时，只有在:matches()接受了主题选择器时才能实现这一点，而这一点从未在规范中直接说明：

ul:matches(! > li:nth-of-type(2)) ~ p, /* p follows ul */
!p ~ ul:matches(! > li:nth-of-type(2)) /* p precedes ul */

你也可以在这里看到为什么我不喜欢名字＆＃34;父选择器＆＃34;对于任一形式的选择器 - 它可以用于以及更多。

Answer 2

根据Wikipedia：

  

选择器无法提升

     

CSS目前无法选择满足特定条件的元素的父元素或祖先元素。仍处于工作草稿状态的CSS选择器级别4提出了这样的选择器，但仅作为“完整”选择器配置文件的一部分，而不是动态CSS样式中使用的“快速”配置文件。更高级的选择器方案（例如XPath）将启用更复杂的样式表。 CSS工作组之前拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关。

至于何时会引入选择器等级4，但是......好吧，这取决于主要浏览器何时实现对它的支持。当足够多的用户升级到那些浏览器版本时。

修改：有关详细信息，请参阅this answer。

Answer 3

在css中没有父选择器。但由于一个小技巧，我可以使用 .childinternal ：parent {   背景颜色：黄色 } 在我的本地CSS文件中，无需深入到jquery或javascript。

这个技巧有点脏，因为它改变了父元素的风格（这不是CSS所做的），也不是真正的伪类。 但是在你的css样式表中你可以使用它。

有两种实施方式（均显示） 第一个是伪类：父类只能在本地样式表上完成，因为某些浏览器的“不允许使用错误的伪装”。

另一个是在所有样式表上运行的，检查'GetParent类引用'。

对我而言，它有效。我通常选择第一个，这是最快的。

解决方案：

$(function() {

  //First possibility when using local css file (=faster)//

  $.when($.get("your local filename.css")).done(function(response) {
    var spl = response.split(":parent");
    if (spl.length > 1) {
      var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
      var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
      var eClas = $(clas).parent().attr('style');
      eClas = eClas == undefined ? '' : (eClas + '').toString;
      $(clas).parent().attr('style', eClas + ';' + cs);
    }
  });
});

// second possibility looping all used css files

for (var s = document.styleSheets.length - 1; s >= 0; s--) {
  var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || []; // IE support
  for (var c = 0; c < cssRules.length; c++) {
    if (cssRules[c].selectorText) {
      if (cssRules[c].selectorText.indexOf('.GetParent') > -1) {
        var spl = cssRules[c].cssText.split(".GetParent");
        if (spl.length > 1) {
          var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
          var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), ''));
          var eClas = $(clas).parent().attr('style');
          eClas = eClas == undefined ? '' : (eClas + '').toString;
          $(clas).parent().attr('style', eClas + ';' + cs);
        }
      }
    }
  }
}

.childinternal :parent {
  background-color: yellow
}

.childexternal .GetParent {
  Background-color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Not affected Main parent
  <div class="childinternal">
    <p>Not affected parent (no parent selector)</p>
  </div>
  <div class="childinternal:parent">
    <p>local css file used (:parent selector)
      <span style='color:grey;font-size:0.6em'>Only works on local files so not possible to show in this snippet
      </span>
    </p>
  </div>
</div>

<div>
  <div class="childexternal .GetParent">
    <p>external css file used (.GetParent class selector)</p>
    <div class="x"></div>
  </div>
</div>