包裹在 anchor 中的 float 图像的 CSS 问题

Question

我有一堆用 HTML 定义的图像，给定了一个“独特的”类，然后通过 wordpress 的魔力，它们被一个没有类或 id 的 anchor 包裹起来来识别它。我最终得到...

<a href="http://test.com/DSC_0042.JPG" title="Details of image">
    <img class="picasa-image alignleft" width="150" height="150" alt="DSC_0042.JPG" src="http://picasa-image.url/s150-c/DSC_0042.JPG" title="Details of image">
</a>

我可以通过使用 .picasa-image 选择来为我的图像设置规则，但是当我将它向左浮动时，它会被忽略。当我删除 anchor 标记时，它会正确 float 。当我向左浮动 anchor 时，它会正确 float (但页面上的所有其他 anchor 都会 float )。

如何在 css 中设置包含我的图像的 anchor 标记的样式。

Answer 1

最简洁的方法是用另一个更具体的规则(例如，具有更高的选择器特异性或 !important 声明)覆盖不允许您向左浮动图像的规则

否则，如您所说，所有带图像的链接都向左浮动。由于您在 css 中没有祖先选择器，因此您必须以其他方式定位这些链接，并使用特定的选择器属性，例如

a[href$=".JPG"] { float : left }

并且您将定位所有指向 .JPG 的链接，或者如果这些链接以 www.test.com 开头，另一种可能性是定位

a[href^="http://test.com"] { float : left }

或者只是对这些链接应用一个类。