logo标签列表

CSS父级选择器的最新动态

csscss-selectors
3
2
我不确定这是如何成为重复问题的，但是这个问题中的“有人知道是否和何时”的部分除了浏览器供应商之外，没有其他人可以客观地回答，这使得这个问题可能具有权威性的答案，或者是一个非常脆弱的问题。话虽如此，我发布了一个回答来解决第一部分的问题。 - BoltClock
@chipChocolate.py 我并没有询问如何伪造效果，所以我不明白这怎么是重复的。 - U r s u s
1
我试图让你的问题更加实际，并更适合该网站。这个特定功能的开发历史非常有趣，我很高兴有人发布了与调查相关的问题。 - BoltClock
@2ne 如果你像Facebook或Google这样处于大规模的情况下，那么这些问题才是巨大的。 - TylerH
@Ursus "不再提到父选择器" 什么意思？http://dev.w3.org/csswg/selectors-4/#relational http://dev.w3.org/csswg/selectors-4/#profiles - TylerH
显示剩余2条评论
3个回答
12
这项调查最终以主题选择器（所谓的“父选择器”的正式名称）被更加灵活的:has() 伪类取代而告终。该伪类的文档记录在这里（有一个有趣的锚点名称#relational，我想知道那是否会保留）。
当此功能的规范更加稳定时，可能才会出现实现。目前，由于完全使用伪类替换主题选择器等破坏性变化，我不指望它很快就会发生。尽管如此，:has() 伪类可能会保留，但由于其本质，它能否在CSS中实现还有待观察。请参阅同一草案的此部分了解有关实施配置文件的信息。

: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 */

你可以在这里看到我为什么不喜欢“父选择器”的名称，因为它可以用于更多的功能。
它应该被称为“三角形选择器”。 - Luiz Felipe
2
根据维基百科：

选择器无法向上选择

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

至于Selectors Level 4何时推出，这取决于主流浏览器何时支持它，并且有足够多的用户升级到这些浏览器版本。 编辑：有关更多信息，请参见此答案。
-2

在CSS中没有父选择器。但是由于一个小技巧，我可以在本地CSS文件中使用.childinternal :parent { background-color: yellow }而不必深入使用jquery或javascript。

这个技巧有点肮脏，因为它改变了父元素的样式（这不是CSS所做的），并且不是真正的伪类。 但是在您的CSS样式表中，您可以像使用它一样使用它。

有两种实现方式（均已显示）： 第一种是伪类：parent，这只能在本地样式表上执行，因为某些浏览器“不允许错误的伪类”。

另一种是运行所有样式表以检查“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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接