在不受控制的環境中使用css樣板

我正在考慮使用CSS樣板（kube或任何其他）構建我的表單。他們在一個示例html文件中工作得很好，但是如果我想在一個不受控制的環境中使用（意味着css被包含在我的控制之外），它會混淆這些樣式。我想知道是否可以將這些樣式應用於父容器中的元素（例如.custom-options）？在不受控制的環境中使用css樣板

來源

2014-06-06 Friso Kluitenberg

當你說'css被包含在我的控制之外'這是否意味着內聯樣式將被添加到您無權刪除的表單元素上？或者，這是否意味着CSS文件在頁面上被引用，而其他樣式表與相互衝突的樣式？ – Larz

這意味着被引用的頁面（例如，WordPress Admin屏幕模板）包含了許多樣式表，這些樣式表應用了與我的邊相沖突的樣式。 –

您可以隨時添加'！important'，讓您的風格優先於其他任何人。例如：'h1 {color：red！important;}' –

如果你只打算使用樣板靶向.custom-options容器內形式，一種選擇是隻讓選擇更具體：

body.custom-form-page .custom-options input[type="text"], 
body.custom-form-page .custom-options input[type="password"], 
body.custom-form-page .custom-options input[type="email"], 
body.custom-form-page .custom-options input[type="url"], 
body.custom-form-page .custom-options input[type="phone"], 
body.custom-form-page .custom-options input[type="tel"], 
body.custom-form-page .custom-options input[type="number"], 
body.custom-form-page .custom-options input[type="datetime"], 
body.custom-form-page .custom-options input[type="date"], 
body.custom-form-page .custom-options input[type="search"], 
body.custom-form-page .custom-options input[type="datetime-local"], 
body.custom-form-page .custom-options textarea, 
body.custom-form-page .custom-options select[multiple="multiple"] { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    line-height: 1; 
    font-size: 14px; 
    border-radius: 0; 
    background: #fff; 
    box-shadow: none; 
    border: 1px solid #bbbcc0; 
    outline: none; 
    padding: 7px 5px; 
    position: relative; 
    z-index: 2; 
-webkit-appearance: none; 
}

它不漂亮，但...更具體的選擇將比wordpress自己的風格更優先。

嘗試僅使用!important作爲最後的手段，如果您無法獲得足夠具體的選擇器。

來源

2014-06-06 14:37:16 Larz

我最後使用了非常簡單的％grid，並使用重置選擇器 –

在不受控制的環境中使用css樣板

回答

相關問題