Question

这很难在标题中总结，所以原谅我。

基本上，这就是我所拥有的：

a img {
/ * style * /
}

但是，我想在此实例中影响 a 标记。有没有办法在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！

Answer 2

只有在图像正确的情况下才能将样式应用于标记？简而言之，使用直接CSS无法做到这一点。

修改

但是，如果你想用jquery做这个，你可以这样做：

$('a').has('img').addClass('hasImg');

然后使用.hasImg作为你的钩子

a.hasImg{background:lime;display:block;height:200px;width:200px;}

这是一个关于JSBin的演示（我查看源代码）：http://jsbin.com/owafi4

Answer 3

CSS selectors can not ascend。这是语言的限制。

使用CSS来影响外部元素

3 个答案: