有一个CSS父选择器吗？


Is there a CSS parent selector?

如何选择作为锚元素直接父元素的

  • 元素？

    在示例中，我的CSS如下所示：

    1
    2
    3
    li < a.active {
        property: value;
    }

    显然，有很多方法可以用JavaScript来实现这一点，但我希望有一些解决方法是存在于CSS级别2中的。

    我正在尝试样式化的菜单正由CMS发出，因此我无法将活动元素移动到

  • 元素…(除非我以菜单创建模块为主题，我宁愿不这样做)。

    有什么想法吗？

    相关讨论

    • 在stackoverflow.com/questions/45004/&hellip；上进一步讨论这个问题。
    • 这个问题有什么更新吗？我相信最后一次记录的关于这个问题的信件是在2014年3月。怎么回事？
    • @博尔特克罗克有没有谈论过这是否会发生？这个问题是多年前的疑问。
    • @凯尔特：你看到接受答案下面的评论了吗？他们基本上记录了这些年来取得的进展。
    • @博尔特克是的，但最后一个是从去年5月开始的。只是好奇而已。
    • @凯尔特：好吧，记住这些事情需要时间。
    • 我希望将来可以做一些类似lia.active"一致"，正如op所写。对于浏览器性能方面的问题，我非常确定评估一个或另一个不会有很大的区别：浏览器将像往常一样评估表达式，但会选择父代而不是子代…
    • 我希望不会有这样的选择器与CSS的级联特性相矛盾，并且不可避免地会导致代码质量差和更难以维护的代码库。
    • @威利特先生，但我们已经有了:focus-within！
    • 人们似乎忘记了CSS的含义

    当前无法在CSS中选择元素的父级。

    如果有一种方法可以做到这一点，那么它将符合当前的CSS选择器规范：

    • 选择器3级规范
    • CSS 2.1选择器规范

    同时，如果需要选择父元素，则必须使用javascript。

    选择器级别4的工作草案包括一个与jquery实现工作相同的:has()伪类。截至2019年，任何浏览器都不支持此功能。

    使用:has()可以解决原始问题：

    1
    li:has(> a.active) { /* styles to apply to the li tag */ }
    相关讨论

    • 它似乎已经被建议和拒绝：stackoverflow.com/questions/45004/&hellip；
    • 似乎主题选择器已被重新访问，除非现在使用!：The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.。
    • 预先准备好的$对我来说更好看…附加的!更容易被忽略。
    • @阿尼穆森，克里斯托夫：让我们等到他们对草案进行了更多的修订……
    • @阿尼穆森，我同意这里的博尔特钟。我包括的参考文件是工作草案。它只在规范的编辑器草稿版本中被更改。一旦新语法进入工作草稿版本，我将更新我的答案。不管语法如何，目前还没有浏览器或JS框架实现这一点，因此确切的语法目前并不十分重要。
    • 啊…有了$sign，我可以用css 3解决这个问题！
    • 就像一个快速工具一样，选择器4wd在几个月前被更新以包含新的语法。当然，将"旧"的不可用样本更新为仍然不能使用的样本是徒劳的。此外，他们还没有决定最后的语法。
    • ">"选择器在chrome或firefox中不工作
    • @codeninja->选择器在chrome中对我来说工作正常。你确定没有别的问题吗？见测试：dabblet.com/gist/5478862
    • 主要情节扭曲！选择器4wd今天刚刚更新，将主题指示符从快速配置文件中排除，该配置文件将由CSS实现使用。如果更改仍然存在，则意味着您将无法再在样式表中使用主题指示符(除非您使用类似于另一个答案中所述的添加某种polyfill类型的polyfill)，您只能将其与选择器API一起使用，并且可以在任何其他地方实现完整的配置文件。
    • @博尔特克：我想我肯定遗漏了一些东西，但从最新的规范(你链接到的)来看，我们似乎有一个主题选择器(是的，终于！等等)，但是我们不能使用它，因为在"快速"选择器中不允许使用它；是否有指向这个的点，或者只是为将来使用而保留的选择器？
    • @大卫·托马斯：我明白你的意思了。重点是，如果可以实现用于选择器的主题指标，那么在不影响其他事物(如选择器-API2中的querySelectorAll()、matches()的性能的情况下，可以使用选择器的任何地方，都应该实现该指标。另外，假设规范甚至允许——目前还不清楚它是否允许——一些浏览器甚至可能选择实现CSS的完整配置文件，尽管我怀疑很难证明它的实现方式不会对页面呈现性能产生不利影响。
    • @David Thomas:大多数人没有意识到这一点，但是选择器之所以成为自己的模块的原因是，虽然选择器最初是作为CSS的一部分设计的，但现在它们被用于样式表以外的许多地方，如jquery库和Selenium等测试框架。我认为所有这些的要点是不要让CSS实现的性质影响可以为更广泛的用途定义哪些类型的选择器。
    • 如果有人读到了这篇文章，就可以输入草稿了，此时!似乎是所选的符号，那么在css属性中，将一个单独的!也作为!important的别名如何？这样，当在CSS中思考时，!具有(类似于"我要这个"的)统一含义。从这个基础上构建，附加在选择器中可能也更适合于统一性。还有一个好处就是知道span!:nth-child(4)和span:nth-child(4)!的区别。我希望这些想法能进入讨论！
    • @保罗：你的建议有几个基本问题。首先，由于主题选择器甚至可能在CSS中不可用，因此创建一个名为!的!important别名可能没有什么意义。此外，在同一个元素上，每个属性可以有多个!important，但每个选择器只能有一个主题。
    • @保罗：第二，你误解了选择符号。span:nth-child(4)只有一个意思，那就是"第四个孩子的跨度"。这是因为您要将伪类附加到元素类型，这与将ID或类附加到类型选择器的工作方式完全相同。将这样的简单选择器组合在一起会产生一个复合选择器，它表示层次结构中的一个元素，并且规范指定!只能附加到任何一个复合选择器。
    • @Paul S.：如果你想选择一个有4个孩子的跨度，那么正确的选择器应该是span! > :nth-child(4)，如果你想选择跨度的第4个孩子，那么它应该是span > :nth-child(4)，这在今天已经是一个有效的选择器了。其中每一个都有两个复合选择器：span和:nth-child(4)，默认情况下(与当前的css相同)，最右边的一个是主题，这使得!在后一种情况下是可选的。
    • 另一个主要的更新是：看起来他们正在考虑完全取消主题选择器语法，并用:has()伪代码替换它，每个人都从jquery中了解并喜欢它。最新的ED删除了对主题指示器的所有引用，并用:has()伪代码替换了它。我不知道确切的原因，但是CSSWG在一段时间前进行了一次民意调查，结果一定影响了这个决定。它最有可能与jquery兼容(因此它可以在不进行修改的情况下利用qsa)，并且因为主题指示符语法被证明过于混乱。
    • 因此，相应的选择器将是li:has(> a.active)。注意，jquery已经支持:has()中的相对选择器语法，尽管它在任何地方都没有记录。
    • 很遗憾，$E elem看起来好多了，而且比elem:has(E)更容易(更快)理解，而且功能上相当。
    • 这完全打破了CSS基础：层叠样式表。
    • 它不是CSS4，他们也需要停止说CSS3，它只是从这里开始的CSS。工作草案或水平是可以的，但明目张胆的标签"css3"和"css4"必须停止，否则每个人都会开始疯狂地把它们吐出来。C-S……看到了吗？
    • @胡安：这和级联毫无关系。
    • @奥西里斯戈特拉：是的，甚至连CSS3的官方定义都是"CSS2之外的任何东西"，这在实践中完全没有意义(当然也没有"CSS4")。
    • @沃伊特肯尼：事实上，人们从未明确表示它是否会在功能上等同。看看我的答案，为什么我认为他们最终会和:has()一起去。
    • @BoltClock我明白你在说什么，但我更喜欢更有限、更简单(非升序)的功能和主题选择器(从同一个"crawl"中选择)的更简单语法。我同意这是两种不同的功能，你是对的。
    • @波耳克，这就是我的观点。CSS中的"父"选择器不应该存在，因为它不是级联的。CSS是自上而下的，而不是自下而上的。
    • @胡安，这不是"层叠"的意思。级联几乎与选择器无关。在a { rule1: value; } .foo{ rule2: value2; }导致rule1和rule2的意义上，样式表"级联"的值都设置在一个a元素上，该元素具有一个foo类。父选择器的存在与此无关。
    • @我知道级联的含义。在我看来，这也同样适用。再次，整个语言是基于自上而下的规则，你不能开始改变基础只是因为有一个非常具体的边缘情况，需要检查儿童。但这只是我的意见。
    • @Juan层叠并不是在CSS中创建"父"选择器的真正限制。已经有了兄弟选择器、奇数/偶数选择器和各种各样的选择器，它们都引用了一个元素的状态/位置，而这个元素没有任何"自顶向下"模式。真正的限制是实现细节。浏览器已经优化了选择器，只能向前解析，所以任何需要回溯的选择器都将效率低下。这也是为什么存在"下一个同级"选择器，但没有"上一个同级"选择器的原因。
    • …在这种情况下，与选择器完全无关的东西如何应用？！如何从两个样式声明之间的冲突解决转到匹配选择器中的父元素？
    • @实现父选择器很容易。当您分析样式表时，遇到一个以它的父级为目标的选择器，如果您还没有构建DOM，那么就添加这个附加列表。在构建DOM和遇到元素时，可以将样式附加到父元素的CSS样式表中。如果正在分析样式表，并且已经创建了DOM，那么只需将样式添加到父元素样式表中即可。我正好在这个地区工作，所以对我来说没那么难。只是提前计划。
    • 我什么时候可以用在铬合金上？
    • @Alex78191没人知道。它不在Chrome的路线图上，在任何浏览器实现它之前，规范可能会改变。Edge女士已经"考虑中"了它，但它可能要过几年才能使用。
    • EDGE是唯一考虑添加:has()的。请在这里投赞成票。
    • 值得注意的是，:has()不会在CSS中实现，至少在4级模块中不会实现。它只显式地在JS中实现。
    • @如果浏览器供应商严格遵守W3C的CSS规范，那么JPratt世界将是一个非常不同的地方。
    • @例如，是CSSWG创建了规范。无论如何，编写规范的人(大部分)都是供应商的代表。具体来说，对于:has()选择器或任何其他父选择器，实现将从根本上改变CSS的单次传递性质，我预计不会很快发生这种情况。这是来自一个密切关注工作组讨论的人。
    • @你在向合唱团布道，伙计。我知道工作组是如何操作和编写规范的，多年来一直与他们合作并倡导：has()(除许多其他事情外)。

    我认为你不能只在CSS中选择父级。

    但是，既然你已经有了一个.active类，那么把这个类移到li类(而不是a类)不是更容易吗？这样，您就可以只通过CSS访问li和a。

    相关讨论

    • 不能将伪选择器移到列表项，因为它不是可焦点元素。他使用的是：active选择器，所以当锚点处于活动状态时，他希望列表项受到影响。列表项永远不会处于活动状态。顺便说一句，这样的选择器不存在是很不幸的。要想让纯CSS菜单完全可以通过键盘访问，似乎没有它是不可能的(使用兄弟选择器，您可以使使用嵌套列表创建的子菜单出现，但一旦列表获得焦点，它就会再次隐藏)。如果对这个特定的conun有任何仅CSS的解决方案
    • @多米尼克·阿奎利纳(DominicAquilina)看看这个问题，OP使用的是类，而不是伪选择器。

    您可以使用这个脚本。

    1
    *! > input[type=text] { background: #000; }

    这将选择文本输入的任何父级。但是等等，还有很多。如果需要，可以选择指定的父级：

    1
    .input-wrap! > input[type=text] { background: #000; }

    或在激活时选择：

    1
    .input-wrap! > input[type=text]:focus { background: #000; }

    查看此HTML:

    1
    2
        <input type="text" class="Name"/>
        <span class="help hide">Your name sir</span>

    当input处于活动状态时，可以选择span.help并显示：

    1
    .input-wrap! .help > input[type=text]:focus { display: block; }

    还有更多的功能；只需查看插件的文档即可。

    顺便说一下，它在IE中工作。

    相关讨论

    • 假设使用jquery patent()会更快。然而，这需要测试
    • @如果您有没有子选择器的选择器主题的CSS声明(仅#a!就会抛出一个错误，#a! p就可以工作)，那么其他选择器也不会工作，因为Uncaught TypeError: Cannot call method 'split' of undefined：请参见jfiddle.net/herrserker/vkvps
    • @我想是赫尔塞克！是无效的选择器，它应该选择什么？
    • @我不知道。规范没有说这是非法的。啊！应该选择自己。至少在javascript中应该没有错误
    • 根据我对已接受答案的评论，看来即使在不久的将来，也可能需要使用polyfill，因为CSS中的浏览器可能永远不会实现主题指示器。
    • @我不能让你的榜样发挥作用。jsfiddle.net/5z5mv
    • @Redtopia是因为你没有贴上Polyfill
    • 我们能得到一个不依赖jquery的polyfill吗？
    • 现在工作jsfiddle.net/5z5mv/1
    • 这不是要求一个CSS解决方案吗？
    • 那么，你怎么能把一个:after贴在那个家长身上呢？
    • 请在这里添加脚本的内容，否则在Github关闭时这是无用的。

    正如其他一些人所提到的，没有一种方法可以仅使用CSS来设置元素父级的样式，但是以下方法适用于jquery：

    1
    $("a.active").parents('li').css("property","value");
    相关讨论

    • <选择器不存在(使用jquery 1.7.1进行验证)。
    • 也许<语法在2009年起作用了，但我已经更新了它(2013年)。
    • 更好的是，使用jquery的内置:has()选择器：$("li:has(a.active)").css("property","value");。它读起来类似于CSS 4提议的!选择器。另见：:parent选择器，.parents()方法，.parent()方法。
    • 而不是使用.css("property","value")来设置所选元素的样式，通常应该使用.addClass("someClass")并在css .someClass { property: value }中使用(via)。这样，您就可以充分利用CSS和正在使用的任何预处理器来标记样式。

    没有父选择器；就像以前没有兄弟选择器一样。不使用这些选择器的一个很好的原因是，浏览器必须遍历元素的所有子元素，以确定是否应应用类。例如，如果你写了：

    1
    body:contains-selector(a.active) { background: red; }

    然后，浏览器必须等到加载并分析完所有内容，直到决定页面是否应该是红色。

    本文将详细解释为什么没有父选择器。

    相关讨论

    • 所以让浏览器更快。互联网本身更快。这个选择器是绝对需要的，而不实现它的原因，不幸的是，因为我们生活在一个缓慢的原始世界中。
    • 实际上，选择器会使一个非常快的浏览器看起来很慢。
    • 我相信浏览器开发人员会想出一个实现，它(至少)和JavaScript版本一样快，人们最终还是会使用它。
    • "我们生活在一个缓慢原始的世界"咳嗽咳嗽新苹果手表咳嗽

    在CSS2中没有一种方法可以做到这一点。您可以将类添加到li并引用a

    1
    2
    3
    li.active > a {
        property: value;
    }
    相关讨论

    • 通过使a元素显示：块，您可以对其进行样式设置，以适应整个li区域。如果你能解释一下你在寻找什么样的风格，也许我能帮你找到一个解决方案。
    • 这实际上是一个简单而优雅的解决方案，在许多情况下，在父类上设置类是有意义的。

    是：:has()。

    浏览器支持：无

    尝试将a切换到block显示，然后使用您想要的任何样式。a元素将填充li元素，您可以根据需要修改它的外观。不要忘记将li填充设置为0。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    li {
      padding: 0;
      overflow: hidden;
    }
    a {
      display: block;
      width: 100%;
      color: ..., background: ..., border-radius: ..., etc...
    }
    a.active {
      color: ..., background: ...
    }

    CSS选择器"General Sibling Combinator"可以用于您想要的内容：

    1
    2
    3
    E ~ F {
        property: value;
    }

    这与前面有E元素的任何F元素匹配。

    相关讨论

    • 这只是兄弟选择器，不是子选择器，父选择器…不是真的回答问题伙计

    据我所知，不在CSS 2中。CSS3有更强大的选择器，但并没有在所有浏览器中一致地实现。即使有了改进的选择器，我也不相信它能完全完成您在示例中指定的任务。

    我知道OP在寻找一个CSS解决方案，但是使用jquery很容易实现。在我的例子中，我需要找到包含在子

  • 中的标记的

      父标记。jquery具有:has选择器，因此可以通过它包含的子级来标识父级：

      1
      $("ul:has(#someId)")

      将选择具有id someid子元素的ul元素。或者为了回答最初的问题，像下面这样的方法应该可以实现(未经测试的)：

      1
      $("li:has(.active)")
      相关讨论

      • 或者使用$yourSpan.closest("ul")，您将得到SPAN元素的父级ul。不过，你的回答完全是离题的。我们可以用jquery解决方案来回答所有带有CSS标签的问题。
      • 如其他答案所示，使用CSS 2无法做到这一点。考虑到这一限制，我提供的答案是我所知道的有效答案，并且是使用javascript imho回答问题的最简单方法。
      • 考虑到你的支持，有些人同意你。但唯一的答案仍然是被接受的答案；简单明了的"它不能按你想要的方式去做"。如果问题是如何在自行车上以60英里/小时的速度行驶，而你的答案是"简单；上车然后加油"，那么这仍然不是一个答案。因此我的意见。
      • 这种方法几乎完全没用。我这样寻找如何解决问题，不去寻找"唯一答案"也解决不了这个问题。这就是为什么这么棒的原因，因为总有不止一种方法可以剥猫皮。

      这是选择器级别4规范中讨论最多的方面。使用此选择器，可以在给定的选择器(！)后使用感叹号，根据元素的子级设置元素的样式。.

      例如：

      1
      2
      3
      body! a:hover{
         background: red;
      }

      如果用户悬停在任何锚点上，将设置红色背景色。

      但是我们必须等待浏览器实现：(

      相关讨论

      • 可悲的是，现在这个特性已经超出了我所知道的规格…

      您可以尝试使用超链接作为父级，然后在悬停时更改内部元素。这样地：

      1
      2
      3
      4
      5
      6
      7
      a.active h1 {color:red;}

      a.active:hover h1 {color:green;}

      a.active h2 {color:blue;}

      a.active:hover h1 {color:yellow;}

      这样，可以根据父元素的滚动来更改多个内部标记中的样式。

      相关讨论

      • 这是正确的，但如果您希望符合XHTML标准，则仅将a标记内的标记代码限制为某些元素。例如，如果没有收到违反模式的警告，您就不能在a中使用div。
      • 完全正确，伊瓦莱！""是非块元素，因此不能在其中使用块元素。
      • 在HTML5中，将块元素放在链接中是非常好的。
      • @Matthewjamestaylor在语义上是完全错误的
      • …如果它在语义上是错误的，他们就不会允许它出现在HTML5中以前没有的地方。

      伪元素:focus-within允许在子代具有焦点时选择父代。

      如果元素具有tabindex属性，则可以对其进行聚焦。

      浏览器支持

      表索引

      例子

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      .click {
        cursor: pointer;
      }

      .color:focus-within .change {
        color: red;
      }

      .color:focus-within p {
        outline: 0;
      }
      1
      2
      3
      4
      5
      6
      7
      8
        <p class="change" tabindex="0">
          I will change color
       
      </p>
        <p class="click" tabindex="1">
          Click me
       
      </p>

      相关讨论

      • 这对我来说很好，谢谢！只是不，如果您将颜色更改为父级，而不是兄弟级，则示例将更具说服力，这是将.color:focus-within .change替换为.color:focus-within。在我的例子中，我使用的是引导导航栏，它在活动时将类添加到子类中，并且我想将类添加到parent.nav栏中。我认为这是一个非常常见的场景，我拥有标记，但组件css+js是引导(或其他)，所以我无法更改行为。尽管我可以添加tabindex并使用这个css。谢谢！

      目前没有父选择器&；它甚至没有在W3C的任何讨论中讨论。您需要了解浏览器如何评估CSS，以实际了解我们是否需要它。

      这里有很多技术解释。

      Jonathan Snook解释了如何评估CSS。

      克里斯·科伊尔谈家长选择。

      哈利·罗伯茨又一次写了高效的CSS选择器。

      但是尼科尔·沙利文有一些关于积极趋势的有趣事实。

      这些人都是前端开发领域的一流人才。

      相关讨论

      • need是由Web开发人员的需求定义的，是否在规范中包含它取决于其他因素。

      有人提出过这样的建议吗？只是一个横向菜单的想法…

      HTML的一部分

      1
      2
      3
      4
          Link
       
       
        <!-- submenu takes this place -->

      CSS的一部分

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      /* hide parent backgrounds... */
      .parent-background {
        display: none; }

      /* ... and show it when hover on children */
      .item:hover + .parent-background {
        display: block;
        position: absolute;
        z-index: 10;
        top: 0;
        width: 100%; }

      更新了演示和其他代码

      另一个如何与文本输入一起使用的示例-选择父字段集

      相关讨论

      • 我一点也不清楚您是如何将其概括为一些/许多/大多数父选择器用例的，或者甚至不清楚这个CSS的哪些部分在做什么。你能加一个详细的解释吗？
      • 我并没有尝试将其应用于现实世界中的场景，这就是为什么我说"不用于生产"。但我认为它只能应用于两级菜单，且项目宽度固定。"这个css的哪些部分在做什么？"。这里的test sibling实际上是父项(css的最后一行)的背景。
      • 添加说明(JSfiddle的CSS部分，从"主要部分"开始)我错了——可能有很多次转租。

      有一个扩展了CSS的插件，它包含了一些非标准的功能，这些功能在设计网站时非常有用。它叫EQCS。

      eqcss添加的内容之一是父选择器。它适用于所有IE8及更高版本的浏览器。格式如下：

      1
      2
      3
      4
      5
      @element 'a.active' {
        $parent {
          background: red;
        }
      }

      因此，我们在这里打开了每个元素a.active的元素查询，对于查询中的样式，像$parent这样的东西是有意义的，因为有一个参考点。浏览器可以找到父级，因为它与JavaScript中的parentNode非常相似。

      这里有一个$parent的演示，另一个$parent的演示在IE8中工作，以及一个屏幕截图，以防您没有IE8测试。

      eqcs还包括元选择器$prev，用于选定元素之前的元素，$this仅用于匹配元素查询的元素，等等。

      然而，从技术上讲，没有直接的方法可以做到这一点，您可以使用jquery或javascript对其进行排序。

      不过，你也可以这样做。

      1
      2
      a.active h1 {color:blue;}
      a.active p {color: green;}

      JQuery

      1
      $("a.active").parents('li').css("property","value");

      如果您想使用jquery实现这一点，这里是jquery父选择器的引用

      W3C排除了这样的选择器，因为它会对浏览器产生巨大的性能影响。

      相关讨论

      • 错误的。因为DOM是一棵树，所以它们必须在到达子节点之前转到父节点，所以只需返回一个节点即可。O.O
      • CSS选择器是一个队列，因此将计算选择器顺序，而不是文档xpath或dom层次结构。
      • @至少他们是这么告诉我们的。

      简言之，在CSS的这个阶段，我们没有parent selector，但是如果您无论如何都不需要交换元素或类，第二个选项是使用javascript，如下所示：

      1
      2
      3
      4
      5
      6
      7
      var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

      activeATag.map(function(x) {
        if(x.parentNode.tagName === 'LI') {
          x.parentNode.style.color = 'red'; //your property: value;
        }
      });

      或者，如果在应用程序中使用jquery，则使用较短的方法：

      1
      $('a.active').parents('li').css('color', 'red'); //your property: value;

      现在是2019年，CSS嵌套模块的最新草案实际上有类似的内容。介绍@nestAT规则。

      3.2. The Nesting At-Rule: @nest

      While direct nesting looks nice, it is somewhat fragile. Some valid nesting selectors, like .foo &, are disallowed, and editing the selector in certain ways can make the rule invalid unexpectedly. As well, some people find the nesting challenging to distinguish visually from the surrounding declarations.

      To aid in all these issues, this specification defines the @nest rule, which imposes fewer restrictions on how to validly nest style rules. Its syntax is:

      @nest = @nest { }

      The @nest rule functions identically to a style rule: it starts with a selector, and contains declarations that apply to the elements the selector matches. The only difference is that the selector used in a @nest rule must be nest-containing, which means it contains a nesting selector in it somewhere. A list of selectors is nest-containing if all of its individual complex selectors are nest-containing.

      (从上面的URL复制并粘贴)。

      本规范下的有效选择器示例：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      .foo {
        color: red;
        @nest & > .bar {
          color: blue;
        }
      }
      /* equivalent to
         .foo { color: red; }
         .foo > .bar { color: blue; }
       */

      .foo {
        color: red;
        @nest .parent & {
          color: blue;
        }
      }
      /* equivalent to
         .foo { color: red; }
         .parent .foo { color: blue; }
       */

      .foo {
        color: red;
        @nest :not(&) {
          color: blue;
        }
      }
      /* equivalent to
         .foo { color: red; }
         :not(.foo) { color: blue; }
       */

      虽然目前标准CSS中没有父选择器，但我正在开发一个名为axe(即增强的CSS选择器语法/acsss)的(个人)项目，在它的7个新选择器中，这两个都包括：

    • 直接父选择器<(允许与>相反的选择)
    • 任何祖先选择器^(允许与[SPACE]相反的选择)

      • Axe目前处于相对早期的beta开发阶段。

      请在此处查看演示：

      http://rounin.co.uk/projects/axe/axe2.html网站

      (将左边的两个列表与标准选择器进行比较，右边的两个列表与axe选择器进行比较)

      相关讨论

      • 该项目目前处于测试阶段。您可以(至少目前)激活CSS样式中的axe选择器，方法是将

        至少包括CSS3，您不能这样选择。但是现在在JS中可以很容易地完成，您只需要添加一些普通的JavaScript，注意代码非常短。

        1
        2
        3
        4
        5
        6
              cells = document.querySelectorAll('div');
                      [].forEach.call(cells, function (el) {
                      //console.log(el.nodeName)
                        if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                        console.log(el)};
                    });
        1
        2
        3
        4
                    Peter
                    Jackson link
                    Philip
                    Pullman link

        在sass中可以使用和号：

        1
        2
        3
        4
        5
        6
        h3
          font-size: 20px
          margin-bottom: 10px
          .some-parent-selector &
            font-size: 24px
            margin-bottom: 20px

        CSS输出：

        1
        2
        3
        4
        5
        6
        7
        8
        h3 {
          font-size: 20px;
          margin-bottom: 10px;
        }
        .some-parent-selector h3 {
          font-size: 24px;
          margin-bottom: 20px;
        }
        相关讨论

        • 这是真的，但前提是你事先知道选择器。
        • 这并没有选择h3的父母，这是我们的目标。这将选择h3s，它是.some-parent-selector的后代。

        在CSS中，我们可以沿着层次结构级联到属性，但不能反向级联。要修改子事件的父样式，可能需要使用jquery。

        1
        $el.closest('.parent').css('prop','value');