如何选择包含浮动图像的段落？

Question

我希望能够编写适用于段落的CSS规则，但前提是该段落包含带有<img>属性的align标记。注意我不想选择图像，而是包含它的段落。 （我想将样式clear: both应用于段落以确保边距中的浮动图像有空间。）这是否可以仅使用当前浏览器支持的CSS规则？

目前，我实际上正在使用我编写的后处理脚本来修改帮助工具生成的HTML，但使用CSS执行它会更优雅，更不容易出错。

Answer 1

CSS没有任何父选择器，只有后代。您必须使用javascript选择img标记，然后在其上调用getParent（）。

在Mootools javascript库中：

$('p img[align=*]').getParent();

另见：

CSS选择器：http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

Answer 2

没有CSS选择器允许你这样做（本质上是一个后视选择）。跨浏览器支持的最佳选择是：

1. 将JS添加到您的页面以检测浮动图像，然后将css类应用于父段落。
2. 修改代码（如果可能的话）将css类添加到任何浮动图像的父段落。

Answer 3

我不这么认为。由于浏览器不支持选择选择器的父节点，因此删除了支持“包含”属性的想法。

在jQuery中执行此操作相当容易： http://jsfiddle.net/2u7fg/1/

$('p').each(function() {
     if ($(this).find('img').attr('align').length)
         $(this).css('background', 'red');
});

编辑：希望更简洁的版本（我确信有更好的方法）...

$('img').filter(function() { return $(this).attr('align').length > 0; }).parent().css('background', 'red');

http://jsfiddle.net/2u7fg/2/