css-定义同级子元素的样式
我正在尝试基于第一个同级的类定义第二个同级的子元素的样式 下面是一个我正在努力实现的例子css-定义同级子元素的样式,css,Css,我正在尝试基于第一个同级的类定义第二个同级的子元素的样式 下面是一个我正在努力实现的例子 <div > <div class="one"> <div class="find edit"> Find me </div> </div> <div class="two"> <div class="cha
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
找到我
改变我
在本例中,如果找到“编辑”类,我希望“更改我”为绿色。完全基于css是否有可能实现这一点
非常感谢你的帮助
谢谢,
Medha更新: 现在,我注意到子级中需要的
edit
类。你不能
只是需要一个类似于父级的选择器,CSS 3中不存在这种情况,CSS 4中建议这样做,但这远不是很快就能实现的
详情如下:
原件:
根据您关心的浏览器,这可能会起作用:
div.one + div.two > div.change {
color: green;
}
参考:
实例:
在这里你可以找到答案: 从链接复制的简短答案: 选择器无法上升 CSS没有提供选择该元素的父元素或父元素的方法 满足某些标准。更高级的选择器方案(例如 XPath)将支持更复杂的样式表。但是, CSS工作组拒绝家长建议的原因 选择器与浏览器性能和增量渲染相关 问题
据我所知,不可能访问父选择器(我希望是这样)。如果你能考虑这个结构,那就没问题了: HTML
如果没有,您可以用一点JavaScript轻松完成所需内容。但这并不能回答问题,因为他正在寻找一个取决于
是否存在的选择器。编辑是的。现在不可能。即将到来的可能使这成为可能,但正如你所说,这仍然是一个办法。可能的复制也感谢大家,JS它是。
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
.one.edit + .two .change { color: green; }