是否可以为元素定义CSS样式,仅在匹配的元素包含特定元素(作为直接子项)时才适用?
我认为最好用一个例子来解释。
注意 :我正在尝试设置 父元素的样式 ,具体取决于其包含的子元素。
<style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; } </style> <!-- the following div should have a red border because if contains a div with class="a" --> <div> <div class="a"></div> </div> <!-- the following div should have a blue border --> <div> <div class="b"></div> </div>
注意2 :我知道我可以使用javascript来实现,但是我只是想知道是否可以使用一些(对我而言)未知的CSS功能。
据我所知,基于子元素设计父元素的样式不是CSS的可用功能。您可能需要为此编写脚本。
如果您可以做类似div[div.a]或div:containing[div.a]如您所说的事情,那就太好了,但这是不可能的。
div[div.a]
div:containing[div.a]
您可能需要考虑使用jQuery。它的选择器可以很好地与“包含”类型一起使用。您可以根据其子级内容选择div,然后将CSS类全部应用于父级。
如果您使用jQuery,则类似的方法可能会起作用(未经测试但理论存在):
$('div:has(div.a)').css('border', '1px solid red');
要么
$('div:has(div.a)').addClass('redBorder');
结合CSS类:
.redBorder { border: 1px solid red; }