如何选择作为锚元素的直接父元素的<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 2中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。
其他回答
下面是一个使用悬停指针事件的黑客:
<!doctype html><html><head><title></title><style>/*附件*/.父级{宽度:200px;高度:200px;背景:灰色;}父母亲.选择器{显示:柔性;对齐内容:中心;对齐项目:居中;}.选择器{光标:指针;背景:银色;宽度:50%;高度:50%;}</style><style>/*相关的*/.父级{背景:灰色;指针事件:无;}.parent:悬停{背景:紫红色;}父母亲.选择器{指针事件:自动;}</style></head><body><div class=“parent”><div class=“selector”></div></div></body></html>
据我所知,CSS 2中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。
只是一个水平菜单的想法。。。
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%; }
更新的演示和其余代码
另一个示例是如何将其用于文本输入-选择父字段集
有一个插件可以扩展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仅用于与元素查询匹配的元素,等等。
正如其他一些人所提到的,没有一种方法可以仅使用CSS来设置元素的父级,但以下方法适用于jQuery:
$("a.active").parents('li').css("property", "value");