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選擇器不工作 - 爲什麼？

回答

相關問題