使用 CSS 影响外部元素答案

【问题标题】：Use CSS to affect an outer element使用 CSS 影响外部元素
【发布时间】：2010-11-30 09:10:37
【问题描述】：

这很难用标题来概括，请见谅。

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

a img {
/ * style * /
}

但是，我想在这种情况下影响 a 标记。有没有办法在 CSS 中做到这一点而无需借助 JavaScript 魔法？

【问题讨论】：

@andred ，上面的样式适用于属性内的所有图像，现在告诉我你想要什么？？
@Andrex CSS 选择器不能以这种方式选择元素。您将不得不使用 JS 库。
@gov 他要选择所有包含一个IMG元素的A元素。
如果你只想拥有一个那么你可以给一个{}权利
@Andrex：相关问题：stackoverflow.com/questions/1014861/css-parent-selector

标签： html css css-selectors

【解决方案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！

【讨论】：

实际上我想做的是将链接图像居中。目前，我是margin: auto-ing左侧和右侧，但完成后，图像左侧和右侧的整个空间也会被链接。不过答案很好！

【解决方案2】：

您只想在标签的图像正确的情况下将样式应用于标签？简而言之，使用直接的 CSS 是没有办法的。

编辑

但是，如果您想使用 jquery 执行此操作，您可以这样做：

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

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

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

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

【讨论】：

@andrex ，是的，你必须遍历才能找到它，正如 jyoseph 所说，使用纯 css 是不可能的。
如果您使用 JQuery，请注意在 ready 上修改页面的时髦外观 - 特别是在较慢的连接上，您将在页面加载完成后看到所有内容都发生了变化。
我真的不想包含额外的JS，我想我只是添加一个类。

【解决方案3】：

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

【讨论】：