如何选择作为锚元素的直接父元素的<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选择器“General Sibling Combinator”可能用于您想要的用途:
E ~ F {
property: value;
}
这匹配前面有E元素的任何F元素。
其他回答
CSS选择器“General Sibling Combinator”可能用于您想要的用途:
E ~ F {
property: value;
}
这匹配前面有E元素的任何F元素。
有一个插件可以扩展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根据父级的状态来设置父级的样式,因此此代码段会更改HTML,以便在输入元素后面紧跟一个空span元素。此span元素不执行任何操作,直到输入悬停在其显示自身的位置,并展开以适应与已设置位置的祖先相同的大小。这是标签本身,而不是输入。因此,边框(阴影)看起来就像是在标签上。
* {边距:0;填充:0;框大小调整:边框框;}.外部字段{显示:柔性;}.list标签{填充:8px 5px;边框:2px实心黑色;宽度:32%;保证金:1%;显示:柔性;调整内容:间距;对齐项目:居中;柔性流:行;位置:相对;}输入[type=“radio”]~span{显示:无;}input[type=“radio”]:选中/span{显示:内联块;宽度:100%;高度:100%;边框:2px纯红色;方框阴影:0 0 0 3px橙色;位置:绝对;顶部:0;左:0;}<div class=“OuterField”><label for=“List1”class=“listLabel”>列表1<input type=“radio”id=“List1”name=“list”value=“List1“><span></span></label><label for=“List2”class=“listLabel”>列表2<input type=“radio”id=“List2”name=“list”value=“List2“><span></span></label></div>
您可以尝试使用超链接作为父级,然后在悬停时更改内部元素。这样地:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
这样,您可以根据父元素的滚动来更改多个内部标记中的样式。
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}