Opera與Chrome背景圖像繼承？

<html xmlns="http://www.w3c.org/1999/xhtml"> 
<head> 
<title>Opera test - css inheritance</title> 
<style type="text/css"> 
/* theirs */ 
.theirs { 
    background: #FF0000 url("http://www.wonderbackgrounds.com/glitter/backgrounds/glitter_background_b7.gif") repeat 0% 0%; 
} 
/* mine */ 
.mine { 
    background-image: none; 
    background: #FFC0C0; 
} 
</style> 
</head> 
<body> 
<table border="1"> 
    <thead class="theirs"> 
    <tr class="theirs mine"> 
     <th>Month</th> 
     <th>Savings</th> 
    </tr> 
    </thead> 
    <tfoot class=""> 
    <tr class="theirs mine"> 
     <td>Sum</td> 
     <td>$180</td> 
    </tr> 
    </tfoot> 
    <tbody class="theirs"> 
    <tr class="theirs mine"> 
     <td>January</td> 
     <td>$100</td> 
    </tr> 
    <tr class="theirs mine"> 
     <td>February</td> 
     <td>$80</td> 
    </tr> 
    </tbody> 
</table> 
</body> 

</html>

我試圖覆蓋TR的背景顏色，代碼在Chrome瀏覽器上按預期工作，但不在Opera上，這是我們的目標瀏覽器。Opera與Chrome背景圖像繼承？

問題是，我該如何在css的「我的」類中編寫代碼以擺脫背景圖像。它在Chrome中運行並顯示粉紅色單元格，但在Opera中顯示背景圖片。

我不能改變其他CSS，我想清除網址，但歌劇不希望當tbody包含相同的類。我從tfoot中抽出這個類來證明它在這種情況下起作用，但是當在surronding標籤中定義類時不會。

來源

2012-09-10 Matthew Parlane

請在這裏發表您** **相關代碼。 – PeeHaa

CSS特異性問題，你知道。請參閱：http://cssdeck.com/labs/mry24dkq/0 –

@PeeHaa - **按照他的文章中的鏈接。代碼在那裏，功能和實時預覽可編輯。比發佈44行代碼轉儲更好。 – enhzflep

看着代碼，我看到你已經將兩個類都附加到了TR上。由於它們是兩種相互衝突的樣式，因此您依靠應用程序的順序來獲得您所追求的效果。鉻似乎，應用與選擇器應用於元素相同的順序樣式。 I.e class ='他們的礦井'會導致Chrome應用他們的CSS，然後用您的CSS覆蓋它。

就在上個星期，我讀到它實際上並不是規範的一部分 - 樣式應用的順序完全是任意的，直到瀏覽器供應商。

考慮到這一點，你應該簡單地改變你的css，以便類'mine'具有與'他們'類相同的屬性 - 儘管需要更改。

然後，你可以給你的TRs一個'他們'或'我的'。

擴展在我下面留下評論，你可以使用下面的HTML（例如從頁面中你的鏈接所）

<html xmlns="http://www.w3c.org/1999/xhtml"> 
<head> 
<title>Opera test - css inheritance</title> 
<style type="text/css"> 
/* theirs */ 
.theirs { 
    background: #FF0000 url("http://www.wonderbackgrounds.com/glitter/backgrounds/glitter_background_b7.gif") repeat 0% 0%; 
} 
/* mine */ 
.mTable .theirs { 
    background-image: none; 
    background-color: #FFC0C0; 
} 
</style> 
</head> 
<body> 
<table class='mTable' border="1"> 
    <thead class="theirs"> 
    <tr class="theirs"> 
     <th>Month</th> 
     <th>Savings</th> 
    </tr> 
    </thead> 
    <tfoot class=""> 
    <tr class="theirs"> 
     <td>Sum</td> 
     <td>$180</td> 
    </tr> 
    </tfoot> 
    <tbody class="theirs"> 
    <tr class="theirs"> 
     <td>January</td> 
     <td>$100</td> 
    </tr> 
    <tr class="theirs"> 
     <td>February</td> 
     <td>$80</td> 
    </tr> 
    </tbody> 
</table> 
</body> 

</html>

來源

2012-09-10 00:44:26 enhzflep

問題更多的是，我正在使用Primefaces，並且「他們」自動添加。我有一個可以添加到所有模板樣式的常用樣式表，並且我知道每個TR的類末尾都會添加我的「我的」類。我希望這是因爲它是最後一次，它將是最後修改該TR的風格，但似乎並非如此。 THEAD似乎會導致額外的未知數。如果THEAD沒有「他們的」課程，那麼TR CSS就像我想的那樣工作，但否則它不會。您的回答是正確的，所以謝謝。 –

不客氣。我想另外一個選擇是重新定義他們的元素，這些元素包含在其他（特定）元素中。例如，如果您爲表提供了一類mTable，則可以刪除礦井風格，刪除礦井類並添加以下css'.m表。背景：＃FFC0C0; \t}' – enhzflep

可悲的是，它不會工作，因爲我在primefaces中定義哪些行應該有不同的顏色。那行（TR）會添加一個新類。 –

Opera與Chrome背景圖像繼承？

回答

相關問題