如何选择作为锚元素的直接父元素的<li>元素?

例如,我的CSS应该是这样的:

li < a.active {
    property: value;
}

很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。

我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。


当前回答

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

但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。

其他回答

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

有什么想法吗?

如果CSS4在向后行走时添加了一些钩子,那么它会很漂亮。在此之前,可以使用复选框和/或无线电输入来打破通常的连接方式,并且通过这种方式也允许CSS在其正常范围之外运行。。。

/*隐藏可能稍后显示的内容*/菜单_复选框_选择,.menu__checkbox _样式,.menu__隐藏{显示:无;可见性:隐藏;不透明度:0;过滤器:alpha(不透明度=0);/*旧Microsoft不透明度*/}/*内容和样式菜单的基本样式*/.main__内容{背景色:浅灰色;颜色:黑色;}.menu__隐藏{背景色:黑色;颜色:浅灰色;/*使列表看起来不是这样_listy_*/列表样式:无;左侧填充:5px;}.menu__选项{框大小:内容框;显示:块;位置:静态;z索引:自动;}/* &#9660; - \u2630-三条线*//*.menu__trigger__selection::之前{内容:'\2630';显示:内联块;}*//* &#9660; - 向下箭头*/.menu__trigger__selection::之后{内容:“\25BC”;显示:内联块;变换:旋转(90度);}/*自定义以使其看起来更像“选择”(如果愿意)*/.menu__trigger__style:悬停,.menu__trigger__style:活动{光标:指针;背景色:深灰色;颜色:白色;}/***选中复选框/收音机时要做的事情*/.menu__checkbox_selection:选中+.menu__trigger__selection::之后,.menu__checkbox_selection[checked]+.menu__trigger__selection::之后{变换:旋转(0deg);}/*这一点你可以在其他地方看到*/.menu__checkbox_selection:选中~.menu__hidden,.menu__checkbox_selection[checked]~.menu__hidden{显示:块;可见性:可见;不透明度:1;过滤器:alpha(不透明度=100);/*Microsoft*/}/***仅基于非内联复选框的黑客CSS更改* ... AKA这之后你不能解开的东西。。。*/.menu__checkboxx_style[id=“style default”]:选中~.main__content{背景色:浅灰色;颜色:黑色;}.menu__checkboxx_style[id=“style default”]:选中~.main__content.menu__trigger__style[for=“style default”]{颜色:深橙色;}.menu__checkboxx_style[id=“style one”]:选中~.main__content{背景色:黑色;颜色:浅灰色;}.menu__checkboxx_style[id=“style one”]:选中~.main__content.menu__trigger__style[for=“style one”]{颜色:深橙色;}.menu__checkboxx_style[id=“style two”]:选中~.main__content{背景色:深绿色;颜色:红色;}.menu__checkboxx_style[id=“style two”]:选中~.main__content.menu__trigger__style[for=“style二”]{颜色:深橙色;}<!--这一点可行,但总有一天会带来麻烦,但事实是,你可以粘贴复选框/无线电输入随便找个地方,然后用身份证给他们打电话“for”标签。继续滚动查看我的意思--><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style default”><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style one”><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style two”><div class=“main__content”><p class=“paragraph__split”>Lorem ipsum dolor坐amet,consectetur adipiscing elit,sed do eiusmod暂时停止劳动和劳动。乌特海姆和最小的威尼斯,quis nostrud exerciation ullamco labours nisi ut aliquip ex ea commo</p><input-type=“checkbox”class=“menu__checkbox_selection”id=“触发器样式菜单”><label for=“触发器样式菜单”class=“menu__trigger__selection”>主题</label><ul class=“menu__hidden”><li class=“menu__option”><label for=“style default”class=“menu__trigger__style”>默认样式</label></li><li class=“menu__option”><label for=“style one”class=“menu__trigger__style”>第一替代样式</label></li><li class=“menu__option”><label for=“style two”class=“menu__trigger__style”>第二种可选样式</label></li></ul><p class=“paragraph__split”>金桔。我是一个很好的朋友cillum dolore eu fugiat nulla pariator。偶尔会发生意外proident,sunt in guma qui official disestant mollit anim is laburum。</p></div>

……相当粗鲁,但仅使用CSS和HTML,就可以通过链接id和radio/checkbox输入和标签触发器的财产,从几乎任何地方接触和重新接触任何东西,除了正文和:root;很可能有人会在某个时候展示如何重新触摸这些。

一个额外的警告是,只能使用特定id的一个输入,第一个复选框/单选框将赢得切换状态,换句话说。。。但是多个标签都可以指向同一个输入,尽管这会使HTML和CSS看起来更恶心。


…我希望有某种变通方法可以在CSS Level 2中使用。。。

我不确定其他伪类,但我检查了CSS3之前的版本。如果我没记错的话,它类似于[checked],这就是为什么你可以在上面的代码中找到它,例如,

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

…但对于像::after和:hover这样的东西,我完全不确定它们最初出现在哪个CSS版本中。

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

至少包括CSS 3,你不能这样选择。但是现在用JavaScript可以很容易地完成,你只需要添加一些普通的JavaScript,注意代码很短。

cells=document.querySelectorAll('div');[].forEach.call(单元格,函数(el){//console.log(el.nodeName)如果(el.hasChildNodes()&&el.firstChild.nodeName==“A”){控制台日志(el)};});彼得</div><div><a href=“#”>Jackson链接</a></div>菲利普</div><div><a href=“#”>Pullman链接</a></div>

现在是2019年,CSS嵌套模块的最新草稿实际上有这样的内容。介绍@nest at规则。

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

只是一个水平菜单的想法。。。

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

更新的演示和其余代码

另一个示例是如何将其用于文本输入-选择父字段集