如何选择作为锚元素的直接父元素的<li>元素?
例如,我的CSS应该是这样的:
li < a.active {
property: value;
}
很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
如何选择作为锚元素的直接父元素的<li>元素?
例如,我的CSS应该是这样的:
li < a.active {
property: value;
}
很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
有一个插件可以扩展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仅用于与元素查询匹配的元素,等等。
其他回答
试试这个。。。
此解决方案使用无Javascript的简单CSS2规则,适用于所有浏览器,无论新旧浏览器。单击时,子锚点标记将激活其活动的伪类事件。然后,它简单地隐藏自己,允许活动事件向上冒泡到父li标签,然后父li标签重新设计自己的样式,并以新样式再次显示其锚定子对象。子对象已设置父对象的样式。
使用您的示例:
<ul>
<li class="listitem">
<a class="link" href="#">This is a Link</a>
</li>
</ul>
现在,将这些样式应用于a上的活动伪类,以在单击链接时重新设置父li标记的样式:
a.link {
display: inline-block;
color: white;
background-color: green;
text-decoration: none;
padding: 5px;
}
li.listitem {
display: inline-block;
margin: 0;
padding: 0;
background-color: transparent;
}
/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */
a.link:active {
display: none;
}
.listitem:active {
background-color: blue;
}
.listitem:active a.link {
display: inline-block;
background-color: transparent;
}
单击时,您应该会看到带有绿色背景的链接现在变为列表项的蓝色背景。
转到
单击。
如果子代具有焦点,则内的伪元素:focus允许选择父代。
如果元素具有tabindex属性,则可以聚焦该元素。
浏览器支持
标签索引
实例
.parent:焦点在{背景:hsl(199deg,65%,73%);}/*演示样式*/正文{边距:0;}.父级{背景:hsl(0,0%,80%);最小高度:100vh;显示:栅格;放置内容:中心;}.儿童{背景:hsl(0,0%,0%);颜色:白色;填充:3rem;大纲:0;光标:指针;字体:18px/1.25无衬线;宽度:20ch;}<div class=“parent”><div class=“child”tabindex=“1”>点击或关注我,我的父母会改变。</div></div>
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
我认为你不能只在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。
据我所知,CSS 2中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。