2011-07-19 188 views
0

我有具有以下類Soft.CSS文件覆蓋CSS類如何?

.check_out { 
width:58px; 
background-image:url(/a/i/softadd/checkout.gif);} 

什麼,我想在這裏做的是改變這個類(請注意,我沒有獲得Soft.CSS,因爲它是從其他餵養服務器)至

.check_out { 
width:58px; 
background-image:url(/myserver/checkout.gif);} 

我該怎麼做?使用CSS?使用Jquery?

+5

我認爲你可以將你的代碼添加到你的css文件並確保在Soft.CSS之後加載它。 – JWC

回答

2

我認爲這足夠了,如果你確定你的css片段是在Soft.css文件後出現的。大多數瀏覽器只會在找到相同標識的雙重條目時找到最後找到的定義。

否則,您可以使用PHP解析Soft.css文件,並在background-image上執行一些正則表達式並找到文件名。

UPDATE
另一種答案:

你有沒有想過具有check_out -class每一個元素上添加另一個類的?你可以寫自己的CSS像check_out_ow其他一些類,並用jQuery添加它:

$(document).ready(function() 
{ 
    // every element gets an extra class with custom information 
    $('check_out').addClass('check_out_ow'); 
}); 

我不知道,但我希望兩個班的信息位於不止一個類的更深。你的CSS可能看起來像:

.check_out.check_out_ow { 
width:58px; 
background-image:url(/myserver/checkout.gif);} 
+1

這不是「大多數瀏覽器」它是任何符合瀏覽器處理最後一個定義。這就是爲什麼這些是「級聯」樣式表。 – Marcin

+1

是的,這是我記得,但我記得有一些舊的瀏覽器反過來。但是你是對的,我不能爲這個事實提供一個很好的參考。 – Marnix

+0

謝謝,通過在Soft.css後添加一個新的CSS和我所需的類來覆蓋CSS – user580950

-1

jquery的方法是選擇類 - $(「。check_out」) - 並修改css(我不記得該怎麼做)。

它不改變類,但會改變使用類的所有內容。當然,如果因爲使用它添加其他元素而必須更改類,那麼這可能無法正常工作。

這很大程度上取決於您的精確要求和解決方案。

+0

不需要一個笨手笨腳的JavaScript方法,CSS被設計爲處理級聯中的覆蓋。 – shanethehat

+0

@shanethehat - 一年前,那裏的一組問題你只需使用JavaScript的CSS分配。動畫是這類問題的一個很好的例子。並且,再次,操作DOM CSSRules與設置樣式屬性相比是非常罕見的技術。 – shabunc

+0

是的 - 但它取決於你對頁面加載的控制。如果你不能使用CSS覆蓋,這是一種方法。 –

0

如果要重新定義完全規則本身,而不是各自的CSS屬性,好了,你必須在JavaScript這樣的機會(不是jQuery的)

有文件.styleSheets集合,我們可以訪問。每個項目都是CSSStyleSheet,它具有cssRules集合。但Schroedingers Cat是正確的,當我們真的需要直接訪問規則時,很少有這種情況。

檢查this經典參考,如果你想搞砸DOM CSS。

但是在你的情況下,如已經提到的那樣,用單獨的樣式表添加重新定義的規則肯定會更好。

0

如前所述,您只需將規則添加到另一個CSS文件中,或直接添加到<style>標記的頁面中,即可在包含Soft.css後添加。

如果在你的CSS文件附加的順序也是你的控制,你可以使用增加的特異性,以確保您的規則被視爲更重要的是:

div.check_out { /* assuming the element is a div */ 
width:58px; 
background-image:url(/myserver/checkout.gif);} 
0

一個簡單的解決辦法就是給你樣式具有更高的特異性,不管它是在soft.CSS之後加載的,甚至是在, 之前加載的,所有您需要做的就是讓您的CSS選擇器的.check_out具有更高的特異性,只需添加任何父類(甚至ID會更好),所以可以說你有一個<div id="wrapper">,包裝所有元素,然後你可以覆蓋y我們的風格是:

#wrapper .check_out { 
    width:58px; 
    background-image:url(/myserver/checkout.gif); 
} 

你也可以將此ID添加到身體(例如)如果你有機會到..

參考以下article,瞭解更多關於特異性的事情

0
$(function() { 
    $('.check_out').css('background-image', '/myserver/checkout.gif'); 
}); 

jsFiddle example

將更新日的.check_out所有實例e輸出頁面。我認爲這正是你想要的。您不想在樣式表本身中編輯類,因爲您無法訪問它。