小部件CSS與網站CSS衝突

我正在爲我的用戶製作小部件，以便它們可以包含在他們的網站中。小部件CSS與網站CSS衝突

在這在我的用戶的網站託管文件的style.css：

p { 
    font-size: 0; 
}

在我的窗口小部件 - widget.css：

#mydiv { 
    font-size:12px; 
}

然而，當用戶包括在其網站上我的CSS部件。我的CSS不起作用，一個作品是style.css。如何讓我的widget.css始終工作在頂部？

我想重要的，它不工作：

enter image description here

2014-05-19 monocular

您應該瞭解CSS是如何工作的。！重要的是適用於有任何其他方式的情況.. – enapupe

@monoccular：查看更新的答案。 – frenchie

您可以使用重要旁邊聲明;！像這樣：

#mydiv { 
    font-size:12px !important; 
}

有些人會聲稱使用！important總是不好的做法，但事實並非如此。事實上，在製作一個插件或小部件時，它會在其他人的網站上運行，那時這是一個很好的練習。看看這裏：http://css-tricks.com/when-using-important-is-the-right-choice/

編輯：在這個問題看你的形象後，的問題是，它似乎ID ulcfrmcontainer指的是列表的容器，而不是容器內的實際li元素。試試這個：

#ulcfrmcontainer li{ 
     font-size:12px !important; 
    }

2014-05-19 14:36:57 frenchie

這是不對的。你不知道問題的細節和！重要的不應該像那樣使用。 – enapupe

雖然'重要的'*可能*工作，這不會是一個好習慣使用。在你的小部件選擇器中使用更多的特異性。 –

我不同意;它有一個目的，這是何時使用它。請解釋你爲什麼認爲「可能」有效，爲什麼你認爲這是不好的做法。 – frenchie

你有2種選擇：

正確的做法：

1）確保您的元素路徑是完全正確的。例如

.wrapper div p {}

2）確保你的CSS文件包括後另一個

另一種方式（如果第一次不工作）

使用！重要的。就像這樣：

font-size:12px!important;

編輯

看着它看起來就像是增加了字體大小與ID #ulcfrmcontainer而不是到unordened列表一個div您的最新截圖。

可能想嘗試：

#ulcfrmcontainer ul { 
    font-size:12px; 
}

2014-05-19 14:42:41

那麼現在你將要處理用戶加載他的樣式表的順序了嗎？當製作在其他人的網站上運行的小部件或插件時，！重要的規則是很好的做法。 – frenchie

雖然'重要的'*可能*工作，它不會是一個最佳實踐。嘗試並在你的小部件中使用更多特異性。 –

@BrettSantore：完全不同意。製作小工具時，使用！重要的是良好的做法。 – frenchie

p是現有的HTML應答器，並mydiv是一個id，或許這選擇段落的父DIV。

CSS按優先級別應用規則。

這裏更多的信息：

嘗試用這些信息來解決問題，並且只使用，如果沒有其他的解決方案，「重要！」。（Good article to determine if use !important is the right solution :)）

希望這將有助於您瞭解和解決您的問題:)

2014-05-19 14:44:42

與ID，它是不太可能在用戶的網站，如「小部件，wrapper-使用包裹你的widget一個div DIV」。或者，您可以通過在ID中包含一個或兩個單詞描述（如「partsearch-widget-wrapper」）來更具描述性。

<div id="widget-wrapper-div"> 
    <div> 
     Widget code... 
    </div> 
</div>

然後在你的CSS，你會開始每個樣式規則與#widget-wrapper-div

#widget-wrapper-div div{ 
    font-size: 12pt; 
}

2014-05-19 14:51:28 Jmh2013

回答