问题:是否有CSS父选择器?

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

  • 元素?

    作为一个例子,我的CSS将是这样的:

    li < a.active {
        property: value;
    }
    

    很显然,可以使用JavaScript进行此操作,但我希望CSS 2本身具有某种解决方法。

    我要设置样式的菜单已由CMS弹出,因此我无法将活动元素移动到

  • 元素...(除非我将菜单设为主题创建模块,而我不想这样做。

    有什么想法吗?

  • 标签:css,css-selectors

    回答1:

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

    如果有一种方法可以实现,则可以使用当前的CSS选择器规范之一:

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


    选择者4级工作草案包含:has()伪类,其作用与 jQuery实现相同。截至2019年, 任何浏览器仍不支持

    使用:has()可以用以下方法解决原始问题:

    li:has(> a.active) { /* styles to apply to the li tag */ }
    

    回答2:

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

    但是,由于您似乎已经有了一个.active类,因此将该类移到li(而不是a)。这样,您只能通过CSS访问lia

    回答3:

    您可以使用此脚本

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

    这将选择文本输入的任何父项。但是,等等,还有更多。如果需要,可以选择一个指定的父级:

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

    或在活动时选择它:

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

    查看此HTML:

    <div class="input-wrap">
        <input type="text" class="Name"/>
        <span class="help hide">Your name sir</span>
    </div>
    

    您可以在input处于活动状态时选择span.help并显示它:

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

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

    顺便说一句,它可以在Internet Explorer中使用。

    回答4:

    正如其他一些人提到的那样,没有一种仅使用CSS样式化元素父元素的方法,但是下面的方法可以用于 jQuery

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

    回答5:

    是: :has()

    浏览器支持:

    回答6:

    没有父选择器;就像以前没有同级选择器一样。没有这些选择器的一个很好的理由是,浏览器必须遍历元素的所有子元素以确定是否应应用类。例如,如果您写了:

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

    然后,浏览器将不得不等待,直到它加载并解析了所有内容,直到来确定页面是否应为红色。

    文章 为什么我们没有父选择器 详细解释。

    回答7:

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

    li.active > a {
        property: value;
    }
    

    回答8:

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

    li {
      padding: 0;
      overflow: hidden;
    }
    a {
      display: block;
      width: 100%;
      color: ..., background: ..., border-radius: ..., etc...
    }
    a.active {
      color: ..., background: ...
    }
    

    回答9:

    CSS选择器" 通用同级组合器"可能用于您想要的东西:

    E ~ F {
        property: value;
    }
    

    这与任何以E元素开头的F元素匹配。

    回答10:

    据我所知,在CSS 2中还没有。 CSS 3具有更强大的选择器,但并非在所有浏览器中都一致实现。即使使用了改进的选择器,我也不相信它会完全完成您在示例中指定的操作。

    回答11:

    我知道OP一直在寻找CSS解决方案,但是使用jQuery很容易实现。就我而言,我需要为子

  • 中包含的标记找到
      父标记。 jQuery具有:has选择器,因此可以通过其包含的子代来标识父代:

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

      将选择 ul 元素,该元素具有ID为 someId 的子元素。或回答原始问题,以下方法可以解决问题(未测试):

      $("li:has(.active)")
      
  • 回答12:

    这是选择器级别4 规范中讨论最多的方面。这样,选择器将能够通过在给定选择器(!)之后使用感叹号来根据元素的子元素设置样式。

    例如:

    body! a:hover{
       background: red;
    }
    

    如果用户将鼠标悬停在任何锚点上,则会设置红色背景色。

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

    回答13:

    如果后代具有焦点,则伪元素:focus-within允许选择父对象。

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

    浏览器对焦点内置的支持

    Tabindex

    示例

    .click {
      cursor: pointer;
    }
    
    .color:focus-within .change {
      color: red;
    }
    
    .color:focus-within p {
      outline: 0;
    }

    回答14:

    您可以尝试将超链接用作父级,然后在悬停时更改内部元素。像这样:

    a.active h1 {color:red;}
    
    a.active:hover h1 {color:green;}
    
    a.active h2 {color:blue;}
    
    a.active:hover h1 {color:yellow;}
    

    通过这种方式,您可以基于父元素的翻转在多个内部标签中更改样式。

    回答15:

    当前没有父选择器,并且W3C的任何讨论中都没有讨论它。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它。

    这里有很多技术说明。

    乔纳森·史努克(Jonathan Snook)解释了CSS的评估方式

    克里斯·科耶尔(Chris Coyier)讨论家长选择器

    Harry Roberts再次编写了高效的CSS选择器

    但是妮可·沙利文(Nicole Sullivan)有一些有趣的事实积极的趋势

    这些人都是前端开发领域中的顶级人才。

    回答16:

    只是一个关于水平菜单的想法...

    HTML的一部分

    <div class='list'>
      <div class='item'>
        <a>Link</a>
      </div>
      <div class='parent-background'></div>
      <!-- submenu takes this place -->
    </div>
    

    CSS的一部分

    /* 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%; }
    

    更新了演示和其余代码

    另一个示例如何在文本输入中使用它-选择父字段集

    回答17:

    有一个扩展CSS的插件,其中包括一些非标准功能,这些功能在设计网站时可以真正提供帮助。称为 EQCSS

    EQCSS添加的一件事是父选择器。它适用于所有浏览器,Internet Explorer 8及更高版本。格式如下:

    @element 'a.active' {
      $parent {
        background: red;
      }
    }
    

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

    这是$parent 另一个在Internet Explorer 8中运行的$parent演示,以及如果您没有Internet Explorer 8可以测试的屏幕截图

    EQCSS还包括元选择器$prev元素位于选定元素之前,并且$this仅用于那些与元素查询匹配的元素,等等。

    回答18:

    这是使用pointer-eventshover的黑客:

    <!doctype html>
    <html>
    	<head>
    		<title></title>
    		<style>
    /* accessory */
    .parent {
    	width: 200px;
    	height: 200px;
    	background: gray;
    }
    .parent, 
    .selector {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .selector {
    	cursor: pointer;
    	background: silver;
    	width: 50%;
    	height: 50%;
    }
    		</style>
    		<style>
    /* pertinent */
    .parent {
    	background: gray;
    	pointer-events: none;
    }
    .parent:hover {
    	background: fuchsia;
    }
    .parent 
    .selector {
    	pointer-events: auto;
    }
    		</style>
    	</head>
    	<body>
    		<div class="parent">
    			<div class="selector"></div>
    		</div>
    	</body>
    </html>

    回答19:

    从技术上讲,没有直接的方法可以做到这一点。但是,您可以使用jQuery或JavaScript进行整理。

    但是,您也可以执行类似的操作。

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

    jQuery

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

    如果您想使用jQuery实现此目的,请参考 jQuery父选择器

    回答20:

    现在是2019年, CSS嵌套模块的最新草案实际上已经这样的事情。介绍@nest规则。

    3.2。嵌套规则:@nest

    虽然直接嵌套看起来不错,但它有些脆弱。不允许使用某些有效的嵌套选择器,例如.foo&,并且以某些方式编辑选择器会使规则意外无效。同样,有些人发现嵌套很难在视觉上与周围的声明区分开。

    为解决所有这些问题,此规范定义了@nest规则,该规则对如何有效嵌套样式规则施加了较少的限制。其语法为:

    @nest=@nest <选择器> { }

    @nest规则的功能与样式规则相同:它以选择器开头,并包含适用于选择器匹配的元素的声明。唯一的区别是@nest规则中使用的选择器必须包含嵌套,这意味着它在某个位置包含嵌套选择器。如果所有单独的复杂选择器都包含嵌套,则选择器列表包含嵌套。

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

    此规范下的有效选择器示例:

    .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; }
     */
    

    回答21:

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

    回答22:

    简短的回答是;在CSS的现阶段,我们没有parent选择器,但是如果您仍然不必交换元素或类,则第二种选择是使用JavaScript。像这样:

    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

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

    回答23:

    尽管目前标准CSS中没有父选择器,但我正在一个名为 axe 的(个人)项目(即增强CSS选择器语法/ ACSSSS )在其7个新选择器中,这两个都包括在内:

    1. 直接父项选择器<(这使得与> 相反的选择)
    2. 任何祖先选择器 ^(可对[SPACE]使用相反的选择)

    目前处于BETA的相对早期开发阶段。

    在此处查看演示

    http://rounin.co.uk/projects/axe/axe2.html < / a>

    (比较左侧使用标准选择器样式的两个列表和右侧使用斧形选择器样式的两个列表)

    回答24:

    至少不能选择CSS 3(包括CSS 3)。但是,如今使用JavaScript可以很容易地做到这一点,您只需要添加一些原始的JavaScript,请注意代码很短。

    cells = document.querySelectorAll('div');
    [].forEach.call(cells, function (el) {
        //console.log(el.nodeName)
        if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
            console.log(el)
        };
    });

    回答25:

    有什么想法吗?

    如果

    CSS 4向后退中添加一些 hook ,则CSS 4将会很有用。到那时为止(尽管建议)可以使用复选框和/或radio input break 连接事物的常用方式,并通过这种方式还可以使CSS在其正常范围之外运行...

    /* Hide things that may be latter shown */
    .menu__checkbox__selection,
    .menu__checkbox__style,
    .menu__hidden {
      display: none;
      visibility: hidden;
      opacity: 0;
      filter: alpha(opacity=0); /* Old Microsoft opacity */
    }
    
    
    /* Base style for content and style menu */
    .main__content {
      background-color: lightgray;
      color: black;
    }
    
    .menu__hidden {
      background-color: black;
      color: lightgray;
      /* Make list look not so _listy_ */
      list-style: none;
      padding-left: 5px;
    }
    
    .menu__option {
      box-sizing: content-box;
      display: block;
      position: static;
      z-index: auto;
    }
    
    /* &#9660; - \u2630 - Three Bars */
    /*
    .menu__trigger__selection::before {
      content: '\2630';
      display: inline-block;
    }
    */
    
    /* &#9660; - Down Arrow */
    .menu__trigger__selection::after {
      content: "\25BC";
      display: inline-block;
      transform: rotate(90deg);
    }
    
    
    /* Customize to look more `select` like if you like */
    .menu__trigger__style:hover,
    .menu__trigger__style:active {
      cursor: pointer;
      background-color: darkgray;
      color: white;
    }
    
    
    /**
     * Things to do when checkboxes/radios are checked
     */
    
    .menu__checkbox__selection:checked + .menu__trigger__selection::after,
    .menu__checkbox__selection[checked] + .menu__trigger__selection::after {
      transform: rotate(0deg);
    }
    
    /* This bit is something that you may see elsewhere */
    .menu__checkbox__selection:checked ~ .menu__hidden,
    .menu__checkbox__selection[checked] ~ .menu__hidden {
      display: block;
      visibility: visible;
      opacity: 1;
      filter: alpha(opacity=100); /* Microsoft!? */
    }
    
    
    /**
     * Hacky CSS only changes based off non-inline checkboxes
     * ... AKA the stuff you cannot unsee after this...
     */
    .menu__checkbox__style[id="style-default"]:checked ~ .main__content {
      background-color: lightgray;
      color: black;
    }
    
    .menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
      color: darkorange;
    }
    
    .menu__checkbox__style[id="style-one"]:checked ~ .main__content {
      background-color: black;
      color: lightgray;
    }
    
    .menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
      color: darkorange;
    }
    
    .menu__checkbox__style[id="style-two"]:checked ~ .main__content {
      background-color: darkgreen;
      color: red;
    }
    
    .menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
      color: darkorange;
    }

    ...非常漂亮的 gross ,但是仅使用CSS和HTML,就可以触摸和重新触摸除body:rootradio / checkbox idfor属性,可以从几乎任何位置访问code> > input s label 触发器;可能有人会在某个时候展示如何对其进行修饰。

    另一个警告是,只能使用特定id一个 input,第一个checkbox / <换句话说,code> radio 赢得切换状态... 但是多个标签可以全部指向同一个 input这样会使HTML和CSS看起来更粗糙。


    ...我希望CSS 2本身具有某种解决方法...

    我不确定其他:选择器,但是我:checked表示CSS 3之前的版本。如果我没记错的话,它就像[已选中] ,这就是为什么您可以在上面的代码中找到它的原因,例如

    <!--
      This bit works, but will one day cause troubles,
      but truth is you can stick checkbox/radio inputs
      just about anywhere and then call them by id with
      a `for` label. Keep scrolling to see what I mean
    -->
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-default">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-one">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-two">
    
    
    <div class="main__content">
    
      <p class="paragraph__split">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      </p>
    
      <input type="checkbox"
             class="menu__checkbox__selection"
             id="trigger-style-menu">
      <label for="trigger-style-menu"
             class="menu__trigger__selection"> Theme</label>
    
      <ul class="menu__hidden">
        <li class="menu__option">
          <label for="style-default"
                 class="menu__trigger__style">Default Style</label>
        </li>
    
        <li class="menu__option">
          <label for="style-one"
                 class="menu__trigger__style">First Alternative Style</label>
        </li>
    
        <li class="menu__option">
          <label for="style-two"
                 class="menu__trigger__style">Second Alternative Style</label>
        </li>
      </ul>
    
      <p class="paragraph__split">
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    
    </div>

    ...但是对于::after:hover之类的东西,我完全不确定那些最初出现在哪个CSS版本中。

    所有这些都说明了,请不要在生产中使用它,甚至不要在愤怒中使用它。开个玩笑,或者换句话说,仅仅因为可以完成某件事,并不总是意味着应该这样做。

    回答26:

    否,您不能仅在CSS中选择父级。

    但是,由于您似乎已经有了一个.active类,因此将该类移到li(而不是a)。这样,您只能通过CSS访问lia

    回答27:

    Sass 中的&符号是可能的:

    h3
      font-size: 20px
      margin-bottom: 10px
      .some-parent-selector &
        font-size: 24px
        margin-bottom: 20px
    

    CSS输出:

    h3 {
      font-size: 20px;
      margin-bottom: 10px;
    }
    .some-parent-selector h3 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    

    回答28:

    仅当我们在父元素内有一个元素时,才可以更改基于子元素的父元素。当输入获得焦点时,其相应的父元素会受到CSS的影响。

    以下示例将帮助您了解如何在CSS中使用:focus-within

    .outer-div {
      width: 400px;
      height: 400px;
      padding: 50px;
      float: left
    }
    
    .outer-div:focus-within {
      background: red;
    }
    
    .inner-div {
      width: 200px;
      height: 200px;
      float: left;
      background: yellow;
      padding: 50px;
    }

    回答29:

    我会雇用一些JavaScript代码来做到这一点。例如,在React中,当您遍历数组时,将另一个类添加到父组件,这表明它包含您的子代:

    <div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
        {kiddos.map(kid => <div key={kid.id} />)}
    </div>
    

    然后简单地:

    .parent {
        color: #000;
    }
    
    .parent.has-kiddos {
        color: red;
    }
    

    回答30:

    由于" CSS工作组先前拒绝父选择器的建议的主要原因与浏览器性能和增量渲染问题有关,因此没有CSS(因此在CSS预处理器中)"是父选择器。

    回到顶部