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

Question

我希望能够编写适用于段落的 CSS 规则，但前提是该段落包含带有 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/