包含在锚点中的浮动图像的CSS问题

时间:2012-04-07 11:52:22

标签: css

我有一堆用HTML定义的图像,给出了一类“独特的东西”,然后通过wordpress的魔力,它们被一个没有类或id的锚包裹起来以识别它。我结束了......

<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来为我的图像设置规则,但是当我向左浮动时,它会被忽略。当我删除锚标签时,它会正确浮动。当我浮动锚点时,它会正确浮动(但页面上的所有其他锚点都会浮动)。

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

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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

或者只是将类应用于这些链接。