使用CSS来影响外部元素

Question

这很难在标题中总结,所以请原谅我.

基本上,这就是我所拥有的:

a img {
/ * style * /
}

但是,我想影响此实例中的标记.有没有办法在CSS中这样做而不诉诸JavaScript魔法？

Answer 1

不幸的是,CSS中的级联只有一种方式.从你的例子中,我猜你正在尝试做这样的事情:

<a><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->

<a>Hello</a> <!-- This A is normal -->

大多数开发人员只需添加一个类即可完成它.

<a class="icon"><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->

更好的是,使用该类使图标成为背景图像并添加填充.

<style type="text/css">
a.icon { background:18px left center no-repeat; line-height:18px; }
</style>

<a class="icon" style="background-image:url('icon.gif');">Hello with icon</a>

将所有图标图像放入类中,您就可以获得一些非常干净的HTML!