Simple xxx yyy {} CSS选择器不工作 - 为什么？

我有一个看似简单的HTML结构：Simple xxx yyy {} CSS选择器不工作 - 为什么？

<div class="featured-image img-wrapper full-width"> 
    <a href="http://localhost/wordpress/?p=26"> 
    <img ... /> 
    </a> 
</div>

现在我要定位的一个（不幸的是没有自己的类），所以我用这个CSS

.img-wrapper a { 
    background-image:url(../images/bkgs/stripes_tiny_08.png); 
    background-repeat:repeat; 
}

但没有任何反应对这个元素！这当然不是背景图片本身，也尝试过简单的颜色。奇怪的是：在页面上还有另外一个类似的构造，在那里选择器工作！萤火虫显示以下CSS路径（目标是一个在末端）

working: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content article#post-26.post-26 div.featured-image a.img-link 
not wrk: html.js body.single div#page.wrap div#main-container.container div#primary.site-content div#content aside#yarpp_widget-2.widget div.bloglist article.post div.three div.featured-image a

我的想法。没有找到任何压倒一切的CSS声明。任何想法我可以如何瞄准？

编辑：目标a包含一个img，它具有：悬停不透明度设置。这样，我可以看到背景色的作品，而不是背景图像。然而

来源

2012-07-31 Dreamingof8a

http://jsfiddle.net/r48ST/它的工作原理。我假设你的形象不透明，你不能看到它的背后，或者说有更多的冲突风格。 – MetalFrog 2012-07-31 14:22:07

它不是.img-wrapper一个img {/ * ... * /}？ – 2012-07-31 14:22:13

只是意见：添加显示：块; to .img-wrapper a – 2012-07-31 14:23:01

你想要做这个效果吗？ http://jsfiddle.net/r48ST/1/

[编辑]：这是影响http://jsfiddle.net/r48ST/2/，只是在图像上添加了一些不透明度。另外，对不透明度设置一些过渡效果，您可以获得全面的效果。

来源

2012-07-31 14:28:03

不，实际上这个效果：http://labs.sevenspark.com/当你将鼠标悬停在图像上时，你会看到背景图像的条纹。 – Dreamingof8a 2012-07-31 14:46:50

http://jsfiddle.net/r48ST/2/你去了 – 2012-07-31 14:59:25

谢谢你，上面关于显示器的一个关于你的评论：块做了诀窍。你能向我解释为什么？除了在你的jsfiddle中，没有为包装div指定宽度 – Dreamingof8a 2012-07-31 15:29:20

删除IMG（如果它不是透明的）

的冲突：

看跌的CSS指令结束重要。
或尝试内联样式。

来源

2012-07-31 14:25:37 N4553R

我认为他的问题不是样式被覆盖，而是它被应用在被包装的图像元素后面。 – 2012-07-31 14:32:44

img悬浮不透明度为0.5;也尝试过！重要的 - >没有改变。 – Dreamingof8a 2012-07-31 14:48:38

没有指定尺寸为您的<a>标签，它将符合它包含的<img>标签的尺寸。因此，您应用的任何背景图片都将被<img>覆盖。重复使用只能重复背景图像多次，它会适应（裁剪或整体）在元素内。如果你给这个元素的宽度和高度大于它所包裹的图像的宽度和高度，你应该看到背景。

我希望这是你所面临的问题。否则，如果您可以发布更多的代码或演示，我们将能够更好地为您提供帮助。

编辑：我只注意到你的编辑有关：悬停不透明度。我建议你改变造型更像这样：a > img:hover { visibility: hidden; }

来源

2012-07-31 14:31:42

抱歉，我的第一条评论是误导性的。这不是我想要的;我想实现这里看到的悬停效果http://labs.sevenspark.com/ – Dreamingof8a 2012-07-31 15:09:13

好的，这里是你使用jQuery的解决方案：'$（“a> img”）。mouseenter（function（）{$（this））。 fadeTo（.65，400）;}）。mousedeave（function（）{$（this）.fadeTo（1，400）;}）;'你将不得不提出一个IE修复，因为fadeTo不在IE中工作。如果遇到困难，我可以帮助你 – 2012-07-31 15:54:28

Simple xxx yyy {} CSS选择器不工作 - 为什么？

回答

相关问题