css - 当图像的父级时从链接中删除背景

发布于 2024-10-16 00:41:17 字数 375 浏览 3 评论 0原文

我给我的链接设置背景颜色以使其脱颖而出,问题是它也适用于将图像作为子项而不是文本的链接。结果是图像底部有一个小背景。 (参见:http://blog. cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )

当链接有一个子img时,如何删除链接的背景?我认为这样的事情会起作用:

.featured_tutorial img < a

I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )

How do i removed the background of links when it has an img as a child? I though that someting like this would work:

.featured_tutorial img < a

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

情感失落者 2024-10-23 00:41:17

CSS 不支持 parent 选择器。

您必须使用像 a.this_link_contanis_img{ /*override background*/ } 这样的类

,或者您可以为 img 设置一个新属性。这可能会隐藏链接的背景。

.featured_tutorial img{ /*覆盖背景*/ }

编辑:好的,这在你的情况下不起作用。

CSS does not support a parent selector.

You have to use classes like a.this_link_contanis_img{ /*override background*/ }

Or maybe you could set a new property to the img. This could hide the link's background.

.featured_tutorial img{ /*override background*/ }

Edit: Ok, that wont work in your case..

月隐月明月朦胧 2024-10-23 00:41:17

层叠样式表不允许“向后”访问元素。您只能访问元素的子元素,而不能访问其父元素。

Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.

年少掌心 2024-10-23 00:41:17

它在底部有背景泄漏,因为默认情况下图像是内联级别元素,并且位于它们所在的文本行的基线处,因此基线和下降线之间存在间隙,导致颜色泄漏。您可以通过两种方式摆脱它。将 css 设置为:

a img { display: block; }

或者如果您希望保持显示为内联,

a img { vertical-align: bottom }

这应该可以解决您的问题,因为它将图像与在内联模式下放置图像的文本行的下降线对齐。

希望它有帮助,

T.

It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:

a img { display: block; }

or if you want the to stay displayed as inline

a img { vertical-align: bottom }

this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.

Hope it helps,

T.

耀眼的星火 2024-10-23 00:41:17

如前所述,没有 CSS 修复,但由于您已经在使用 jQuery,这是我能想到的唯一方法

http: //jsfiddle.net/vrqCV/

jQuery(document).ready(function() {
    jQuery("a:not(:has(img))").addClass("bg");
 });

As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it

http://jsfiddle.net/vrqCV/

jQuery(document).ready(function() {
    jQuery("a:not(:has(img))").addClass("bg");
 });
眼藏柔 2024-10-23 00:41:17

正如已经指出的,CSS 没有办法“向上”查找 DOM 树。这基本上归结为性能考虑。 (这里有一个解释。)

但是如果你不反对有时必要的用 Javascript 来处理这种事情是邪恶的,jQuery 有一个 :parent 选择器

As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)

But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文