覆蓋默認的jQuery css？

我想縮小jQuery UI滑塊小部件的句柄。我創建了這個CSS：覆蓋默認的jQuery css？

.ui-slider-handle { 
    width: 10px; 
}

DOM檢查器告訴我的哪個部分被忽略，以支持jQuery UI CSS。

我該如何給我的優先權？通過jQuery函數（.slider（））創建滑塊句柄並且實際上不在.html文件中的唯一方法是使用代碼在之後使用jQuery爲其分配ID ，然後希望CSS應用，否則手動添加寬度屬性與代碼。這些看起來不夠好看。

最好的方法是什麼？

2013-03-12 Aerovistae

什麼是替代你的選擇器？ – Blender 2013-03-12 20:22:22

找到答案 - 使用'！important'標籤。 – Aerovistae 2013-03-12 20:24:16

@Aeroovistae不要使用'！important'。它似乎首先是有用的，但後來你發現它毒害了你的樣式表和你的生活。 – kapa 2013-03-12 20:25:04

它被jQuery UI的CSS覆蓋，因爲它有更多的specificity。如果你看看他們的代碼，你只需要更多，並會覆蓋它。

html body .ui-slider .ui-slider-handle {} 
/* the added points from html & body, will trump jQuery UI's rule */

使用!important也將處理這個問題，但它通常說是你不想使用，除非有確實沒有辦法得到它周圍的東西。一個例子就是如果你在一個元素上有內聯樣式，並且你想要在你的樣式表中勝出這些樣式。內聯樣式給出點，這是不可能的。

2013-03-12 20:22:43

準確地說它是'.ui-slider .ui-slider-handle' – 2013-03-12 20:24:20

啊，我徹底理解了。謝謝 – Aerovistae 2013-03-12 20:25:17

您可以手動覆蓋任何在自己的CSS JQuery的或jQueryUI的默認樣式，如果你足夠努力。有幾個問題有這樣做，雖然：

正如你已經發現，級聯使得默認的CSS優先於（可能是驚人的）的方式，所以你必須使用黑客 - 像!important，或選擇器中的多餘標籤，如htmlbody - 以確保您的樣式「擊敗」JQuery's。
更有問題的是，許多小部件Menu作爲主要罪犯（但還有其他人）在初始化時動態創建新的選擇器。要覆蓋這些樣式，在編寫JS代碼後，必須在頁面上使用Firebug或類似工具來計算新的選擇器名稱，並將它們添加到樣式表中。

正確的做法是使用ThemeRoller工具創建一個可以同時更改所有樣式的自定義CSS「包」。獎金：由於您可以看到自定義樣式如何同時影響所有小部件，因此爲您的頁面創建統一的外觀更加容易。

2013-03-13 19:35:54 dodgethesteamroller

回答