有一个CSS父选择器吗？


Is there a CSS parent selector?

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

  • 元素？

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

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

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

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

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

    有什么想法吗？

    相关讨论

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

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

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

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

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

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

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

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

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

    相关讨论

    您可以使用这个脚本。

    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中工作。

    相关讨论

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

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

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

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

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

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

    相关讨论

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

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

    是：: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)")
      相关讨论

      这是选择器级别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;}

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

      相关讨论

      伪元素: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>

      相关讨论

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

      这里有很多技术解释。

      Jonathan Snook解释了如何评估CSS。

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

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

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

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

      相关讨论

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

      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的插件，它包含了一些非标准的功能，这些功能在设计网站时非常有用。它叫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排除了这样的选择器，因为它会对浏览器产生巨大的性能影响。

      相关讨论

      简言之，在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选择器进行比较)

      相关讨论