在元素父項中應用css但不在子元素中

-2

我想讓包含img元素的第3行也是綠色，怎麼辦？在元素父項中應用css但不在子元素中

<div style="padding-top:5px;"> 

    <div class="right">line 1</div> 
    <div class="right">line 2</div> 
    <div class="right"> 
     <img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img> 
    </div> 
    <div class="right">line 4</div> 
    <div class="right">line 5</div>  
</div> 

.right { 
    background-color: red; 
} 

.right > img { 
    background-color: green; 
}

fiddle

PS。 IMG元素動態出現時，它是不可預測..

來源

2015-09-27 Fábio Zangirolami

您可以處理圖像標籤的解決方案？把它包裝在一個div中？ – turbopipp

什麼語言動態創建此代碼？你可以操縱它來添加'.green'類到包含圖像的div嗎？然後添加CSS'.green {background-color：green;}'？ – turbopipp

jsfiddle demo

//HTML 
<div class="wrapper"> 
    <div class="right">line 1</div> 
    <div class="right">line 2</div> 
    <div class="right"> 
     <div class="image"> 
      <img src="https://upload.wikimedia.org/wikipedia/ro/f/f7/Stack_Overflow_logo.png"></img> 
     </div> 
    </div> 
    <div class="right">line 4</div> 
    <div class="right">line 5</div>  
</div> 

//CSS 
.wrapper{ 
    padding-top:5px; 
    background-color: red; 
} 
.right { 
    width: 100%; 
} 
.image { 
    background-color: green;  
}

編輯： OP是確定用一個jQuery解決方案，並且managed to find that answer himself

$("img.img-thumbnail").parents('div.right').css("background-color", "green");

另一種解決方案也是; $("img.img-thumbnail").parents('div.right').addClass('green');

//CSS 
.green { 
    background-color: green;  
}

來源

2015-09-27 19:21:03 turbopipp

我想知道downvote的原因嗎？是不是可以將圖像封裝在div中？ – turbopipp

我不想把一個div輸入主div和img元素...（我也不明白爲什麼downvote = /） –

有可能實現你的目標，但你必須使用JavaScript來確定父。有一個圖像容器用CSS來定位要好得多。原始代碼中的背景定位在圖像上，並不是100％的寬度，因此它不能完全填充。父div必須是100％寬，並且可以通過id或class來實現目標 - 使其不同於其他'.right'類 – turbopipp

添加以下的CSS：

.right:nth-child(3) { 
    background-color:green; 
}

http://jsfiddle.net/wqf9p56a/

來源

2015-09-27 19:12:11

我不能使用'nth-child'，因爲IMG元素動態出現，這是不可預測的。 –

與jQuery >>solution

$("img.img-thumbnail").parents('div.right').css("background-color", "green");

來源

2015-09-27 19:55:22

它出現'$（「img.img-thumbnail」）。parents（'div.right'）。addClass（'green'） ;性能測試的速度是'.css'方法的兩倍。但是如果是這樣，還要記住用'.green {background-color：green;}'修改CSS。很高興知道，但在你的情況下，可能沒有必要。這完全取決於有多少項目受到影響，以及DOM操作的累積效果。 – turbopipp

在元素父項中應用css但不在子元素中

回答

相關問題